快捷导航
查看: 2129|回复: 6

[分享] CSS3 border-radius圆角

[复制链接]
发表于 2012-11-28 08:00:33 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2017-1-5 00:46 编辑

CSS3实现圆角效果:
实现圆角效果的方式有多种,使用CSS3的border-radius的属性可以轻松的实现圆角效果。
甚至可以说是轻松加愉快,下面就结合实例介绍一下border-radius属性的用法。
所谓实现圆角效果,就是在一个原生的矩形实现圆角效果,代码实例如下:
[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS学习-蚂蚁部落</title>
<style type="text/css">
div{
  width:420px;
  height:420px;
  background-color:#999;
  border-radius:80px;
  margin:0px auto;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

以上代码代码中使用border-radius:10px实现了一个矩形圆角效果,下面就来简单介绍一下border-radius属性,如果此属性只有一个属性值,那么可以同时设置四个圆角的半径,这里的10px就是圆角的半径值,下面就是半径值的图示:
yuanjiao.png
从上面的图示可以看出圆角半径分为水平半径和垂直半径,border-radius属性提供了设置水平半径和垂直半径的方式:
[CSS] 纯文本查看 复制代码
border-radius:水平半径/垂直半径

两者之间用"/"分隔,如果只设置水平半径,那么垂直半径的值和水平半径值相同,例如在以上实例中只设置了水平半径,那么水平半径的值也应用于垂直半径。水平半径和垂直半径都可以分别设置四个值:
一.如果只设置了一个值,那么四个圆角都使用这个值。
二.如果设置了两个值,第一个值作用于左上角和右下角,第二个值作用于右上角和左下角。
三.如果设置了三个值,第一个值作用于左上角,第二个值作用于右上角和左下角,第三个值作用于右下角。
四.如果设置了四个值,那么分别作用于四个角,从左上角开始,按顺时针。
:属性值可以用整数也可以用百分比,具体可以参阅border-radius以百分比设置圆角一章节。
设置两个值:
[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS学习-蚂蚁部落</title>
<style type="text/css">
div{
  width:420px;
  height:420px;
  background-color:#999;
  border-radius:80px 40px;
  margin:0px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

设置三个值:
[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS学习-蚂蚁部落</title>
<style type="text/css">
div{
  width:420px;
  height:420px;
  background-color:#999;
  border-radius:80px 40px 60px;
  margin:0px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

设置四个值:
[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS学习-蚂蚁部落</title>
<style type="text/css">
div{
  width:420px;
  height:420px;
  background-color:#999;
  border-radius:30px 50px 60px 80px;
  margin:0px auto;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

在以上的所有代码中,设置的水平半径和垂直半径都是相同的,下面给出几个分别设置水平半径和垂直半径的值:
实例一:
[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS学习-蚂蚁部落</title>
<style type="text/css">
div{
  width:420px;
  height:420px;
  background-color:#999;
  border-radius:30px/80px;
  margin:0px auto;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

以上代码可以将四个圆角的水平半径和垂直半径值设置为30px和80。
实例二:
[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS学习-蚂蚁部落</title>
<style type="text/css">
div{
  width:420px;
  height:420px;
  background-color:#999;
  border-radius:30px 60px/80px;
  margin:0px auto;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

以上代码将左上角和右下角的水平半径值设置为30px,右上角和左下角的半径值设置为60px,将四个圆角的垂直半径设置为80px。
单独设置圆角:
设置圆角半径值类似于设置边框值一样,可以单独设置某一个圆角的半径值:
一.border-top-left-radius用于设置左上角圆角半径值。
二.border-top-right-radius用于设置右上角圆角半径值。
三.border-bottom-right-radius用于设置右下角圆角半径值。
四.border-bottom-left-radius用于设置左下角圆角半径值。
实例一:
[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />>
<title>CSS学习-蚂蚁部落</title>
<style type="text/css">
div{
  width:420px;
  height:420px;
  background-color:#999;
  border-top-left-radius:80px;
  margin:0px auto;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

以上代码可以将左上角圆角的水平半径和垂直半径都设置为80。
实例二:
[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS学习-蚂蚁部落</title>
<style type="text/css">
div{
  width:420px;
  height:420px;
  background-color:#999;
  border-top-left-radius:40px 80px;
  margin:0px auto;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

以上代码可以将左上角圆角的水平半径和垂直半径设置为40px和80px。这里之间就不用使用"/"分隔了,用空格就可以了。
上面所有的代码都是设置水平半径和垂直半径是相同的,因为一个方位上的圆角只使用一个值。
下面通过代码实例介绍一下如何分别设置水平半径和垂直半径。
代码实例如下:
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS学习-蚂蚁部落</title>
<style type="text/css">
div{
  width:420px;
  height:420px;
  background-color:#999;
  border-radius:100px 50px 80px/ 60px 50px;
  margin:0px auto;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

[CSS] 纯文本查看 复制代码
border-radius:100px 50px 80px/ 60px 50px; 

上面的代码与下面代码等价:
[CSS] 纯文本查看 复制代码
border-top-left-radius: 100px 60px;
border-top-right-radius: 50px 50px;
border-bottom-right-radius: 80px 60px;
border-bottom-left-radius: 50px 50px;

浏览器支持:
IE6-IE8不支持此属性,IE9、谷歌、火狐和Safari较新版本都支持此属性,如果为了保持对较早版本的兼容性,写法如下:
[CSS] 纯文本查看 复制代码
-webkit-border-radius//兼容谷歌和Safari较早版本。
-moz-border-radius//兼容火狐较早版本。
border-radius//W3C写法。

注意border-radius放在最后一行,否则可能会出问题。
如果元素具有边框,那么就要分内圆角和外圆角,具体可以参阅border-radius带border边框情况一章节。
发表于 2013-5-4 14:31:10 | 显示全部楼层
顶起
发表于 2013-5-4 19:25:57 | 显示全部楼层
这算是一篇比较给力的文章了
发表于 2014-3-13 10:06:54 | 显示全部楼层
很全面,顶起
发表于 2014-3-20 14:10:31 | 显示全部楼层
之前只在网上看过有做圆角框的代码,没想到还有这样的~
发表于 2014-4-3 12:38:47 | 显示全部楼层
原来圆角框是这样做出来的。
发表于 2016-6-11 19:27:12 | 显示全部楼层
太过于复杂了

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| 蚂蚁部落 ( 鲁ICP备10022556号-3 )

GMT+8, 2017-3-31 02:32 , Processed in 0.088115 second(s), 26 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表