你不知道的CSS3圆角

对于CSS3中的圆角属性我们大家都很熟悉了，那就是border-radius。

border-radius虽然很熟悉，但是我们在工作当中绝大多数用到的只不过是其中的一点皮毛而已，比如用于制作圆角矩形，或是圆。

那么本文所要分享的呢，是平时大家可能很少用上但是却有必要了解的内容。

首先给出border-radius具体语法：

border-radius：[ <length> | <percentage> ]{1,4} [ / [<length> | <percentage>]{1,4} ]?
<length>：用长度值设置对象的圆角半径长度。不允许负值
<percentage>：用百分比设置对象的圆角半径长度。不允许负值

以上可能对于了解正则表达式的来说比较好理解，通俗来讲就是，该属性可以同时设置1到4个属性值，每个属性值均可以是具体数值或百分比，百分比的话是相对于该元素的宽高属性来定的。此外还可以用斜杠设置第二组值，若是设置了第二组值，那么前一组将代表水平方向上的值，后一组代表垂直方向上的值。

接下来，我将以具体实例来一步步全面剖析border-radius属性。

先写一个通用的矩形：

<!--HTML-->
<div class="box"></div>

/*CSS*/
.box{ width: 200px; height: 100px; border: 1px solid #000;}

一、只设置一个属性值

① 设置具体值

.box{ border-radius: 20px;}

border-radius: 20px;

这个其实就是我们平时用得最多的一种，就是使该矩形四个角的水平方向和垂直方向上的圆角半径均为20px。

.box{ border-radius: 60px;}

border-radius: 60px;

可以发现，此时设置的border-radius: 60px其实与设置border-radius: 50px效果是一样的，因为该矩形高度为100px，而垂直方向上设置圆角半径最大也就是矩形高度的一半，也就是50px，如果超过了该值，那么显示效果会保持不变，而水平方向呢，则会与其垂直方向的圆角半径保持一致，也是50px的显示效果，不会因为这里设置了60px而显示为60px。简单来说，若水平和垂直方向只设置一个圆角半径值，那么该值的最大值以元素短边的长度为准。

② 设置百分比

.box{ border-radius: 50%;}

border-radius: 50%;

这其实也经常使用，只不过我们平时一般都是用来画圆。这里的50%指的是水平方向上的圆角半径为该矩形宽度的50%，垂直方向即为高度的50%。

二、设置一个以上属性值

① 设置具体值

.box{ border-radius: 20px 50px;}

border-radius: 20px 50px;

.box{ border-radius: 20px 30px 40px;}

border-radius: 20px 30px 40px

.box{ border-radius: 20px 30px 40px 50px;}

border-radius: 20px 30px 40px 50px;

以上这些其实也都很好理解，不管设置多少个值都可以类比margin或padding属性。我们都知道，margin也可以同时设置1到4个属性值，若是设置四个属性值，则依次按照上、右、下、左这样的顺时针方向设置外边距。同理，border-radius也类似，若是设置四个属性值，它是依次按照左上、右上、右下、左下这样的顺时针方向设置圆角半径的。若是设置两个或者三个属性值也是同样的方式类比，这里就不再赘述了，自己慢慢领会。

② 设置百分比

原理与一中所述类似，不再赘述。

三、用斜杠设置第二组值

① 设置具体值

.box{ border-radius: 30px/50px;}

border-radius: 30px/50px;

斜杠前面的30px代表每个角上的水平方向的圆角半径均为30px，斜杠后面的50px代表每个角上的垂直方向的圆角半径均为50px。

.box{ border-radius: 20px 80px/30px 30px;}

border-radius: 20px 80px/30px 30px

可以看到，此时的矩形看起来似乎已经开始扭曲变形，其实原理的话与前面所述是一样的，这个例子的样式也可以写成border-radius: 20px 80px/30px，显示效果其实是一样的。

其实还有很多可能的组合值，这里便不再举例，原理同上。

② 设置百分比

原理与一中所述类似，不再赘述。

四、单独设置某个角的圆角半径

① 只设置一个属性值

.box{ border-bottom-left-radius: 100%;}

border-bottom-left-radius: 100%;

哈哈~~ 是不是看起来很像一把杀猪刀？

这个其实也同样可以类比margin或padding，因为它们也可以单独设置某个方向上的边距值。除了示例中的border-bottom-left-radius属性之外，还有border-top-left-radius、border-top-right-radius和border-bottom-right-radius属性，具体含义看属性名相信聪明的你也能明白的。

当然同样的，除了设置示例中的百分比之外，也是可以设置具体值的，这个只要懂得举一反三就行啦~~

② 设置两个属性值

.box{ border-bottom-right-radius: 120px 100px;}

border-bottom-right-radius: 120px 100px;

需要注意的是，这里表达水平方向和垂直方向就不是用斜杠分开了，而是直接用空格隔开就行。

兼容性： IE9及以上浏览器都兼容，目前其他现代浏览器也兼容完好，可放心使用。