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