html盒⼦圆⾓属性,css3：border-radius圆⾓边框详解
相关介绍
这个 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
border radius什么意思属性值:
[ | ]{1,2}
初始值:
应⽤于:
除表单元格边框为collapse的所有元素
继承性:
⽆
百分⽐:
根据盒⼦边框 border-box的宽度.
计算值:
两个长度，分别 或 percentages
w3c属性值详解：
[ | ]：必须出现⼀个值，可长度可百分⽐，⽐如：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(左下圆⾓半径)，也是如此。你只要记住当某个⾓为⼀个值时，确定是⼀个圆，当使⽤两个值确定⼀个椭圆。
了解4个⾓的⼯作原理，那么是是时候来了解⼀下全局圆⾓的属性值了。
w3c属性值详解
1、[ | ]：表⽰圆⾓的半径长度，必须出现其中⼀个值。
2、{1,4}：前⾯的长度值或者百分⽐，最⼩重复⼀次，最⼤可重复4次，如：border-radius:5px border-radius:5px 10px border-radius:5px 10px 15px border-radius:5px 10px 15px 20px
3、[ / [ | ]{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的圆，这⾥的值没有复制。
其实提到值复制，之前我专门将到了margin和padding这两个属性的简写值含义，其实看见css语法中有{1,4}就说明，假如某个值缺省，那么它就会复制另外⼀个值来作为⾃⼰的值，传送门：分析margin和padding简写值
刚刚前⾯第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的椭圆，如图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。