CSS3 border-radius 属性_HTML5_柯乐义
您的位置：
CSS3 border-radius 属性
定义和用法border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。其中border-*-radius包括：border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius提示：该属性允许您为元素添加圆角边框！默认值： 0继承性： no版本： CSS3JavaScript 语法： object.style.borderRadius="5px"语法border-radius: 1-4 length|% / 1-4 length|%;其中length定义圆角的形状。而%则以百分比定义圆角的形状。注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。浏览器支持：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。例子 1border-radius:2等价于：border-top-left-radius:2border-top-right-radius:2border-bottom-right-radius:2border-bottom-left-radius:2例子 2border-radius: 2em 1em 4em / 0.5em 3等价于：border-top-left-radius: 2em 0.5border-top-right-radius: 1em 3border-bottom-right-radius: 4em 0.5border-bottom-left-radius: 1em 3border-top-left-radius 属性定义左上角边框的形状。border-top-right-radius 属性定义右上角边框的形状。border-bottom-right-radius 属性定义右下角边框的形状。border-bottom-left-radius 属性定义左下角边框的形状。例子：向 div 元素添加圆角：&style&.keleyiradius{border:1border-radius:25-moz-border-radius:25 /* Old Firefox */width:200height:100}&/style&&div class=&keleyiradius&&&/div&效果：
Copyright&酷勤网 C 程序员的那点事！
当前位置： >
浏览次数：次
今天来聊聊这个border-radius属性，radius的英文意思是弧度的意思，而国人更喜欢称之为圆角，因为它可以使得我们的边框有棱有角。当年前辈们都是用图片君搞定圆角的年代或用一条条边框构造的年代已经一去不复返，而移动互联网的高速发展为border-radius属性的飞速发展，so今天就来聊聊圆角边框。虽然英文翻译过来叫做半径弧度，但是为了能让大家更加熟悉，下文统一使用圆角半径来代替。
这个borde-radius属性其实也是一个简写值，它分别是 border-top-left-radius（左上圆角半径）, border-top-right-radius（右上圆角半径）, border-bottom-right-radius （右下圆角半径）,border-bottom-left-radius（左下圆角半径），如下图所示：
说到半径，我突然想起来了以前数学中学过关于圆跟半径的关系，百科如下：
在圆中，连接圆心和圆上任意一点的线段叫做圆的半径。通常用字母r来表示。
在球中，连接球心和球面上任意一点的线段叫做球的半径。
正多边形所在的外接圆的半径叫做圆内接正多边形的半径。
css中的radius多少也跟圆扯上关系，不过要分椭圆还是圆，因为css中分了垂直半径和水平半径。而几何中的圆只要确定了半径就可以画出一个圆出来。css中圆角，当使用一个值时，确定为圆角；当使用两个值时，确定一个椭圆圆角，但是不管是圆角还是椭圆角其实都有点像是背景和设置这个圆角半径的重叠产生的，浏览器会去除他们的没有交集的部分，留下有交集的部分，像CDR里面两个有交集的图形使用的相交。
可能一开始很难了解，不妨往下看吧。
说完了大概的东东，那么问题来了，圆角边框具体值有哪些，莫急少年，上w3c找码去。
对于border-radius，w3c的解释在右侧：
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
[ &length& | &percentage& ]{1,2}
除表单元格边框为collapse的所有元素
根据盒子边框的宽度.
两个长度，分别 &length& 或 percentages
w3c属性值详解：
[ &length& | &percentage& ]：必须出现一个值，可长度可百分比，比如：border-top-left-radius:5px,border-top-left-radius:5px 50%都是可行
{1,2}： 表示他们的值最小可以重复一次，最大可重复两次。假如只有一个值，表示圆角，那么它的水平距离和垂直距离相等，即第二个值复制第一个值；假如是两个值，那么确定一个椭圆角，第一个值椭圆的水平半径，第二值为椭圆的垂直半径，说起来有点拗口，直接上图：
只有1个值，如：border-top-left-radius:50px，表示半径为50px圆，如图：
标注错误了，盒子尺寸为：300*100
假如有两个值，如：border-top-left-radius:50px 100px，表示水平半径为50px，垂直半径为100px的椭圆，如图：
同理 border-top-right-radius（右上圆角半径）, border-bottom-right-radius （右下圆角半径）,border-bottom-left-radius（左下圆角半径），也是如此。你只要记住当某个角为一个值时，确定是一个圆，当使用两个值确定一个椭圆。
你可以轻戳右侧的demo：
了解4个角的工作原理，那么是是时候来了解一下全局圆角的属性值了。
border-radius
[&length&|&percentage&]{1,4} [ / [&length&|&percentage&]{1,4} ]?
详情看下表各单元值
除表单元格边框为collapse的所有元素
根据盒子边框的宽度.
详情看下表各单元值
w3c属性值详解
1、[&length&|&percentage&]：表示圆角的半径长度，必须出现其中一个值。
2、{1,4}：前面的长度值或者百分比，最小重复一次，最大可重复4次，如：border-radius:5pxborder-radius:5px 10pxborder-radius:5px 10px 15pxborder-radius:5px 10px 15px 20px
3、[ / [&length&|&percentage&]{1,4} ]：表示假如想要出现中括号包含的值，那么要用 / 来连接起来，比如:border-radius:5px 10px 15px 20px / 5px 10px 15px 20px其实后面这4个值就是控制其垂直半径，规定圆角是椭圆角还是圆形角。
4、?：表示前面的被中括号[]包围的这一串数字是可选的，可出现可不出现。
以下没有特别说明，盒子的尺寸200*100，边框宽度1px，放大200%下所见。
1个值：border-radius:5px，那么左上角、右上角、右下角、左下角的圆角半径为5px的圆。即，值复制，第二、第三、第四个值都是复制第一个值。
2个值：border-radius:5px 10px，那么左上和右下角、右上和左下角圆的半径相同，即第三个复制第一个，第四个复制第二个的值。
3个值：border-radius:5px 10px 15px，那么左上角半径为5px的圆，右上角和左下角半径为10px的圆，右下角半径为15px的圆，即第四个复制第二个的值。
4个值：border-radius:5px 10px 15px 20px，那么左上角半径为5px的圆，右上角半径为10px的圆，右下角半径为15px的圆，左下角半径为20的圆，这里的值没有复制。
你可以轻戳右侧的demo：
其实提到值复制，之前我专门将到了margin和padding这两个属性的简写值含义，其实看见css语法中有{1,4}就说明，假如某个值缺省，那么它就会复制另外一个值来作为自己的值，传送门：
刚刚前面第3点已经提到了，斜扛 &/& 符号后面的4个值可选，假如要选，那么必须用斜扛符号&/&来分隔开来，斜扛符号后面的值确定一个椭圆的垂直半径，假如border-radius:5px / 5px 10px 15px 20px说明四个角的垂直半径分别为5px，10px，15px，20px。跟上面的一样，这4个垂直半径值对应的角是依次分别是 border-top-left-radius（左上圆角垂直半径）, border-top-right-radius（右上圆角垂直半径）, border-bottom-right-radius （右下圆角垂直半径）,border-bottom-left-radius（左下圆角垂直半径）
1个值：border-radius:5px/5px，那么其水平半径和垂直半径相等，故为圆，如图
2个值：border-radius:5px/5px 10px，那么其左上角和右下角水平半径和垂直半径为5px的圆，右上角和左下角水平半径为5px，垂直半径为10px的椭圆，如图
3个值：border-radius:5px/5px 10px 15px，那么其左上角半径为5px的圆，右上角和左下角水平半径为5px，垂直半径为10px的椭圆，右下角水平半径为5px，垂直半径为15px的椭圆，如图
4个值：border-radius:5px/5px 10px 15px 20px，那么其左上角半径为5px的圆，右上角水平半径为5px，垂直半径为10px的椭圆，右下角水平半径为5px，垂直半径为15px的椭圆故为圆，左下角水平半径为5px，垂直半径为20px的椭圆，如图
你可以轻戳右侧的demo：
刚刚在最开始的时候我们提到过交集，我个人是这么认为的，对于这个radius属性，其实是原有的盒子跟这&看不见&的圆或者椭圆相互结合后的产品，所以我是这么理解这个渲染过程：
.br5{ width:300height:200background: #F8D575;border-radius:50} //css代码
1、先渲染盒子模型，这里为300*200px
2、再渲染border-radius属性，因为这里使用了border-radius:50px，其实这里已经包含了四个角，分别是左上角、右上角、右下角和左下角
对应的位置如下图所示
我们把盒子和看不见的圆形放一起看看
接着盒子最外边框与圆形的交集应该是下面这部分
3、浏览器保留盒子内部结构的同时，只保留盒子与&看不见&的圆形相互交集部分，故四个90&的角被圆角所覆盖，但是盒子模型依然起作用。
4、当然对于那四个圆角我们用肉眼是看不见的，浏览器也不会傻乎乎的表现出来，所以最后呈现在我们前面的应该是如下图：
以上是经过w3c研究得出，毕竟英文你懂的，假如你有任何的见解请下下面评论中提出。
说到这里是否以为就告一段落了呢？想睡觉了都。。。
什么时候重叠，重叠之后会是怎样子？这个重叠有点儿意思哈，这就是构造我们纯圆形的原理
重叠分三种情况：
1、左上角和右上角重叠，当宽度 & 圆角半径*2时出现，代码：.demo{width:50height:100border-radius:50}
2、左上角和左下角重叠，当宽度 & 圆角半径*2时出现，代码：.demo{width:200height:100border-radius:50}
3、四个角重叠，当宽度 = 高度 = 圆角半径*2时，那么这个时候，四个角会重叠在一起，构成了圆形.demo{width:100height:100border-radius:50}
重叠后的半径计算
如下两个代码片段
box-sizing: border-
height: 2.5
border-radius: 0.5em 2em 0.5em 2
box-sizing: border-
border-radius: 0.5em 2em 0.5em 2em
第一个片段，height（2.5em）高度恰好可以包含两个相邻半径之和(0.5em + 2em)，那么此时四个角半径正好分别是 0.5em 2em 0.5em 2em。但是假如高度只有2em时，高度容纳不了半径为0.5em + 2em的圆（2.5em），因此他们只能减小到高度（2em）恰好能容纳这两个圆为止，也就是2em，所以对应的左上角和右下角减小到0.4em，右上角和左下角减小到1.6em，此时正好等于高度（2em）。
即2em/0.5em + 2em=0.8，每个角都是按照这个比例缩小0.8，所以得出的半径为：border-radius: 0.4em 1.6em 0.4em 1.6em，而不是之前的border-radius: 0.5em 2em 0.5em 2em
既然学了这个圆角属性，那么就来做一个demo吧，于是在网上找了opera浏览器的logo，这个分析起来不难，就只有两个图层，一个是最底部的椭圆，一个是最上面那层的椭圆。
最终效果图
1、先确定一下最底层的椭圆宽高，量了一下，水平宽度为258px，垂直高度为275px，因为其是一个对称的椭圆，没有倾斜度，故4个角均为水平半径为258px，垂直半径为275px的4个相等椭圆，代码如下
.opera{border-radius:258px 258px 258px 258px /275px 275px 275px 275px}
2、用同样的办法确定最里面的椭圆的半径，因此，四个角均为水平半径120px，垂直半径为229px的椭圆
.opera-top{border-radius:112px 112px 112px 112px/231px 231px 231px 231}
完整代码如下
height:275
background-color:#f22629;
border-radius:258px/275
z-index:1;
.opera-top{
height:231
background-color:#
border-radius:112px/231
z-index:2;
完整demo请轻戳右侧：
不可否认，偏差还是蛮大的，但是就凑合着看吧。。。最主要是电影马上要开始了。。。赶紧写完去看，不然票过期了。
这个边框属性就是造就了鹅厂logo，详情请点击这里：，更多精彩等你来发现。。。。
参考资料：
& 相关主题：查看: 1584|回复: 6
CSS3 border-radius圆角
本帖最后由 antzone 于
23:42 编辑
CSS3实现圆角效果:
实现的方式有多种，使用CSS3的border-radius的属性就可以轻松的实现圆角效果。
甚至可以说是轻松加愉快，下面就结合实例介绍一下border-radius属性的用法。
所谓实现圆角效果，就是在一个原生的矩形实现圆角效果，代码实例如下:
[HTML] 纯文本查看 复制代码运行代码
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&CSS学习-蚂蚁部落&/title&
&style type=&text/css&&
height:420
background-color:#999;
border-radius:80
&div&&/div&
以上代码代码中使用border-radius:10px实现了一个矩形圆角效果，下面就来简单介绍一下border-radius属性，如果此属性只有一个属性值，那么可以同时设置四个圆角的半径，这里的10px就是圆角的半径值，下面就是半径值的图示:
yuanjiao.png (2.17 KB, 下载次数: 3)
22:52 上传
从上面的图示可以看出圆角半径分为水平半径和垂直半径，border-radius属性提供了设置水平半径和垂直半径的方式:
[CSS] 纯文本查看 复制代码border-radius:水平半径/垂直半径
两者之间用&/&分隔，如果只设置水平半径，那么垂直半径的值和水平半径值相同，例如在以上实例中只设置了水平半径，那么水平半径的值也应用于垂直半径。水平半径和垂直半径都可以分别设置四个值:
一.如果只设置了一个值，那么四个圆角都使用这个值。
二.如果设置了两个值，第一个值作用于左上角和右下角，第二个值作用于右上角和左下角。
三.如果设置了三个值，第一个值作用于左上角，第二个值作用于右上角和左下角，第三个值作用于右下角。
四.如果设置了四个值，那么分别作用于四个角，从左上角开始，按顺时针。
注:属性值可以用整数也可以用百分比，具体可以参阅一章节。
设置两个值:
[HTML] 纯文本查看 复制代码运行代码
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&CSS学习-蚂蚁部落&/title&
&style type=&text/css&&
height:420
background-color:#999;
border-radius:80px 40
&div&&/div&
设置三个值:
[HTML] 纯文本查看 复制代码运行代码
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&CSS学习-蚂蚁部落&/title&
&style type=&text/css&&
height:420
background-color:#999;
border-radius:80px 40px 60
&div&&/div&
设置四个值:
[HTML] 纯文本查看 复制代码运行代码
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&CSS学习-蚂蚁部落&/title&
&style type=&text/css&&
height:420
background-color:#999;
border-radius:30px 50px 60px 80
&div&&/div&
在以上的所有代码中，设置的水平半径和垂直半径都是相同的，下面给出几个分别设置水平半径和垂直半径的值:
[HTML] 纯文本查看 复制代码运行代码
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&CSS学习-蚂蚁部落&/title&
&style type=&text/css&&
height:420
background-color:#999;
border-radius:30px/80
&div&&/div&
以上代码可以将四个圆角的水平半径和垂直半径值设置为30px和80。
[HTML] 纯文本查看 复制代码运行代码
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&CSS学习-蚂蚁部落&/title&
&style type=&text/css&&
height:420
background-color:#999;
border-radius:30px 60px/80
&div&&/div&
以上代码将左上角和右下角的水平半径值设置为30px，右上角和左下角的半径值设置为60px，将四个圆角的垂直半径设置为80px。
单独设置圆角:
设置圆角半径值类似于设置边框值一样，可以单独设置某一个圆角的半径值:
一.border-top-left-radius用于设置左上角圆角半径值。
二.border-top-right-radius用于设置右上角圆角半径值。
三.border-bottom-right-radius用于设置右下角圆角半径值。
四.border-bottom-left-radius用于设置左下角圆角半径值。
[HTML] 纯文本查看 复制代码运行代码
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&&
&title&CSS学习-蚂蚁部落&/title&
&style type=&text/css&&
height:420
background-color:#999;
border-top-left-radius:80
&div&&/div&
以上代码可以将左上角圆角的水平半径和垂直半径都设置为80。
[HTML] 纯文本查看 复制代码运行代码
&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&CSS学习-蚂蚁部落&/title&
&style type=&text/css&&
height:420
background-color:#999;
border-top-left-radius:40px 80
&div&&/div&
以上代码可以将左上角圆角的水平半径和垂直半径设置为40px和80px。这里之间就不用使用&/&分隔了，用空格就可以了。
上面所有的代码都是设置水平半径和垂直半径是相同的，因为一个方位上的圆角只使用一个值。
下面通过代码实例介绍一下如何分别设置水平半径和垂直半径。
代码实例如下:[HTML] 纯文本查看 复制代码运行代码&!DOCTYPE html&
&meta charset=& utf-8&&
&meta name=&author& content=&/& /&
&title&CSS学习-蚂蚁部落&/title&
&style type=&text/css&&
height:420
background-color:#999;
border-radius:100px 50px 80px/ 60px 50
&div&&/div&
[CSS] 纯文本查看 复制代码border-radius:100px 50px 80px/ 60px 50
上面的代码与下面代码等价:
[CSS] 纯文本查看 复制代码border-top-left-radius: 100px 60
border-top-right-radius: 50px 50
border-bottom-right-radius: 80px 60
border-bottom-left-radius: 50px 50
浏览器支持:
IE6-IE8不支持此属性，IE9、谷歌、火狐和Safari较新版本都支持此属性，如果为了保持对较早版本的兼容性，写法如下:
[CSS] 纯文本查看 复制代码-webkit-border-radius//兼容谷歌和Safari较早版本。
-moz-border-radius//兼容火狐较早版本。
border-radius//W3C写法。
注意border-radius放在最后一行，否则可能会出问题。
这算是一篇比较给力的文章了
很全面，顶起
之前只在网上看过有做圆角框的代码，没想到还有这样的~
原来圆角框是这样做出来的。
太过于复杂了本鱼表示偶已经不会取标题了。。。
当时写这篇主要是想探讨一下优雅降级和渐进增强的区别，按照正常的逻辑思维，不管是降级还是增强，应该对于效果是没什么区别的，因为后者会覆盖前者，但今天无意看到张鑫旭的一篇文章，关于CSS3属性的书写顺序（10年的，原谅我的孤陋寡闻T_T），标准的css3属性和带webkit的前缀在某些情况是不一样的效果，比如border-radius和-webkit-border-radius带两个参数时，显示的效果并不一样：
.not-a-square {
border-radius: 30px 10 /*让box左上和右下角为30像素圆弧，左下角和右上是10像素圆弧*/
-webkit-border-radius: 30px 10 /*box渲染为每个角都是30像素宽10像素高的圆弧*/
展示结果（直接借图啦，当然本鱼也实践过了，确实如此~）：
顺便带出一下border-radius的参数：
据w3c上的官方解释，是这样子的：
border-radius: 1-4 length|% / 1-4 length|%;1-4指的是radius的四个值，length和%指的是值的单位。
写过border的人都知道border可以带四个参数分别设置四个边框（上左下右的顺序），同样的，border-radius也可以带四个参数，并且以顺时针的方向解析，上左，上右，下右，下左：
border-radius: 5px 10px 20px 50px
展示结果：
两个参数的时候，是上左和下右，上右和下左，比如.div1{border-radius: 2em 1em}，就不截图了，直接
三个参数的时候，是上左，上右和下左，下右，比如.div1{border-radius: 2em 1em 3em}，
那么以斜杠/分开后面的参数是怎么回事呢？是这样子的，第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径，所以你现在就可以画一个左右不对称的圆角啦：
.div1{border-radius: 2em/1em}
看到这里你会不会以如果四个圆角都要分别制定特殊的形状，是不是 2em/1em , 1em/0.5em, 3em/1em, 1em/1em像上面那个四个参数一样的设定（我就是这么以为的），答案是错！误！的！因为官方的解释就是前面放1-4后面放1-4啊！鱼不是被吃掉的就是被笨s的~
border-radius:10px 20px 30px 40px/40px 30px 20px 10px
按顺时针的顺序，斜杠/左边是四个圆角的水平半径，右边是四个圆角的垂直半径，但是通常我们很少写右边的参数，那就是默认右边等于左边的值。当然你也可以省略一些值，比如这样子写.div1{border-radius: 2em 1em 4em / 0.5em 3}，解析顺序你就可以按照上面的自己推算一下啦。
然后再回到张老师的那个-weibkit前缀下的问题{-webkit-border-radius:30px 10px}实际上就等于{border-radius:30px/10px}，效果是一样的，至于为什么，我也还不知道，张老师说background-image也有此问题，姐明天再瞧瞧，back home~
阅读(...) 评论()