borderRadius的计算缩写理解

border-radius是我们实现圆角的方法之一(ie8以下不支持,兼容的话建议上层定位一张圆角图片),不过圆角这个属性也有自己的缩写计算方式,很多人看到“border-radius: 20px 20px 20px / 30px” 这样的代码就不知道圆角效果是什么样的,今天说一下我自己的理解:自动补全法。

border-radius: X1 X2 X3 X4 / Y1 Y2 Y3 Y4;
/*(x1 y1)表示第一个圆角控制点——左上角*/
/*(x2 y2)表示第一个圆角控制点——右上角*/
/*(x3 y3)表示第一个圆角控制点——右下角*/
/*(x4 y4)表示第一个圆角控制点——左下角*/

圆角从左上角到左下角刚好顺时针一周!控制点不足,自动用 X2 补充 X4

真么自动补全呢?就比如开头我们提到的“border-radius: 20px 20px 20px / 30px”

假如:仅有 X1 X2 X3 X4,没有Y1 Y2 Y3 Y4。那么X1 = Y1,X2 = Y2,X3 = Y3,X4 = Y4,也就是说控制点值相等,重复的省略了,补全之后:border-radius: X1 X2 X3 X4 / X1 X2 X3 X4
假如:仅有X1和X2两个控制值,X3,X4为都为空。那么:X3,X4分别可以用X1,X2替换,补全之后:border-radius: X1 X2 X1 X2
假如:仅有 X1 X2 X3,没有X4。那么:X4可以用X2替换,相等省略了,补全之后:border-radius: X1 X2 X3 X2
疑问:为什么不用X1或者X3补全啊? 
答:圆角标准是两个值 border-radius: X Y;所以控制都是对应位置进行补充
疑问:我们常用的仅有一个值:border-radius: 10px;,怎么补全?
答:四个值都相等:border-radius: 10px 10px 10px 10px


以下是不同圆角值,浏览器渲染出来的不同效果: