likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 27

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

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

放一张图就更明确一些。css圆角border-radius属性中斜杠'/'前后分别设置水平和垂直半径

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

//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属性中斜杠'/'前后分别设置水平和垂直半径