CSS3之border-radius深度解析

语法解析

border-radius ： none | <length>{1,4} [ / <length>{1,4} ]
<length>: 由浮点数字和单位标识符组成的长度值。不可为负值。
其中每一个值得数值可以为 px、%、em 等表达形式。

如果 “/” 前后的值都存在，那么 “/” 前面的值设置其水平半径， “/” 后面值设置其垂直半径。如果没有 “/” ，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的，缩写与非缩写形式与margin,padding等写法相同，只是border-radius是四个角的概念，而margin、padding是四个边的概念，空间旋转至与其四个边对应就好理解了。

1. border-radius: [ <length>{1,4} ];// 这里只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等。

2. border-radius:[ <length>{1,4} ] [ <length>{1,4} ] ;// 这里设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值。

3. border-radius:[ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ];// 如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right。

4. border-radius:[ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ];// 如果有四个值，其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left。

除了上述的简写外，还可以和border一样，分别写四个角，如下：

border-top-left-radius: <length> <length>//左上角
border-top-right-radius: <length> <length>//右上角
border-bottom-right-radius:<length> <length>//右下角
border-bottom-left-radius:<length> <length>//左下角

各角拆分出来取值方式：<length> <length>中第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，水平方向和竖直方向的半径相等。

示例

.circle {
	  width: 300px;
	  height: 300px;
	  background-color: red;
	  border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
}

其中查分写后的border-radius如下

border-top-left-radius: 10px 50px;
border-top-right-radius: 20px 60px;
border-bottom-right-radius: 30px 70px;
border-bottom-left-radius: 40px 80px;

如果改成

border-radius: 10px 15px 40px / 50px 60px 70px 80px;

其拆分后就是

border-top-left-radius: 10px 50px;
border-top-right-radius: 15px 60px;
border-bottom-right-radius: 40px 70px;
border-bottom-left-radius: 15px 80px;

如果改成

border-radius: 10px / 50px 60px 70px 80px;

其拆分后就是

border-top-left-radius: 10px 50px;
border-top-right-radius: 10px 60px;
border-bottom-right-radius: 10px 70px;
border-bottom-left-radius: 10px 80px;

参照文中的语法解析就很好理解了。

图解水平半径和垂直半径

当border-radius不存在 “/” 时，即水平半径等于垂直半径

当border-radius存在 “/” 时，并水平半径不等于垂直半径