CSS边框半径第二半径说明
我当时正在看文件 “边界半径”属性似乎有第二个半径值CSS边框半径第二半径说明,css,Css,我当时正在看文件 “边界半径”属性似乎有第二个半径值 /* The syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10px 5% / 20px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ borde
/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px 5% / 20px;
/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;
/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;
我知道border radius属性及其简短的语法，但我不明白“/”后面的值有什么作用。后面的值是矩形每个角的实际圆度值 /后面的第一个值是与左上角有关的值。 第二个是关于右上方的，第三个是关于右下方的，最后一个是关于左下方的 看看这个例子： 一个绿色方框，带有一个正方形，其每个角都根据CSS规则四舍五入到相应的值中
.box {
background: green;
width: 200px;
height: 200px;
border-radius: 10px 5% / 50px 20px 30px 5px;
}
第一组值定义水平半径。可选的第二组值（前面有“/”）定义垂直半径。如果只提供了一组值，则它同时用于垂直和水平半径。完整形式如下：
border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
border-radius: top-left-up top-right-up bottom-right-down bottom-left-down /
top-left-left top-right-right bottom-right-right bottom-left-left;
.box{
背景：绿色；
宽度：200px；
高度：200px；
边界半径：50px 50px 50px 50px/50px 50px 50px 50px；
边缘底部：20px；
}
.box2{
背景：绿色；
宽度：200px；
高度：200px；
边界半径：10px 50px 50px 50px/50px 50px 50px 50px；
边缘底部：20px；
}
.box3{
背景：绿色；
宽度：200px；
高度：200px；
边界半径：50px 50px 50px 50px/10px 50px 50px 50px；
边缘底部：20px；
}
.box、.box2、.box3{显示：内联块}