乐趣区

关于css:css圆角borderradius属性中斜杠怎么理解

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 文档内调试

退出移动版