我很难理解 Mozilla 在涉及除法时对边界半径属性的解释。
示例:
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;
我知道第一个值
10px
是半径的宽度,5%
是高度。我不明白他们如何受到/
后面的数字的影响。
您可以为每个角指定两个值(因此最多为 8 个值),即两个方向(水平/垂直)的半径。
我认为下面的图片很好地解释了它:
第一组值定义水平半径。可选地,第二组值前面有一个“/”(它不是除法),定义垂直半径。 如果只提供一组值,这些值将用于垂直和水平半径(这显然是造成混乱的原因)。
因此,与您的假设不同 - 在您的示例中,
10px
是左上角和右下角的水平半径。 5%
是右上角和左下角的水平半径。 “/”后面的其他四个值是左上角、右上角、右下角和左下角的垂直半径。
所以请记住:在这两个网站上都可以使用简写(“/”之前和之后),因此您实际上可以拥有 2 到 8 个值之间的所有内容。
查看border-radius的文档。