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

属性值:

[ | ]{1,2}

初始值:

0

应用于:

除表单元格边框为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的椭圆，如图