border-radius: 1-4 length|% / 1-4 length|%;这是W3School上对于border-radius的完整语法,但是注意,我们一般使用的时候,是不会写‘/‘右边的内容,那么浏览器会默认前后相等,所以我们会做出圆角边框
如果写出来,但不相等会如何呢?
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
border-radius: 2em 1em 4em / 0.5em 3em;
}
可以看出,我们做出的是不规则的圆角。其中‘/‘之前的事水平半径,之后的是垂直半径。
上述代码中的"border-radius: 2em 1em 4em / 0.5em 3em;"就等价于
border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
时间: 2024-11-03 05:29:36