css圆角border-radius属性中斜杠'/'前后分别设置水平和垂直半径

border-radius 设置元素外边框圆角

忽然发现之前使用border-radius忽略了斜杠'/'然后查阅了w3c，感觉不太好理解。w3c使用语法1-4:圆角位置，分别是top-left,top-right,bottom-right,bottom-left.顺时针。length|% :使用长度或者百分比设置值。斜杠'/'前设置水平半径，斜杠'/'后设置垂直半径。

放一张图就更明确一些。

以设置水平半径为例，对相同的值有几种简写

//1.四个圆角值均相等
border-radius:10px 10px 10px 10px; 
border-radius:10px; //简写

//2.对角相等
border-radius:10px 50px 10px 50px;
border-radius:10px 50px; //简写

//2.圆角2、3值相等
border-radius:10px 50px 50px 20px;
border-radius:10px 50px 20px; //简写

省略斜杠'/'后的值，则表示同个位置的垂直半径值与水平半径值相等（使用百分比时，值相等实际长度不一定相等）。border-radius原来可以生成非常多不同的形状。

MDN文档内调试