css圆角border-radius属性中斜杠'/'怎么理解

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

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

放一张图就更明确一些。
css圆角border-radius属性中斜杠'/'怎么理解_第2张图片

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

//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文档内调试
css圆角border-radius属性中斜杠'/'怎么理解_第3张图片

你可能感兴趣的