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

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