html - 带除法的边界半径

Question

我很难理解 Mozilla's涉及除法时的border radius属性说明。

示例:

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

我知道第一个值 10px 是半径的宽度，5% 是高度。我不明白 / 后面的数字如何影响它们。

一个样本:https://jsfiddle.net/wvyesszq/1/

Answer 1

您可以为每个 Angular 指定两个值(因此最大值为 8 个值)，即两个方向(水平/垂直)的半径。

我认为下面的图片很好地解释了它:

第一组值定义水平半径。并且可选的第二组值，前面有一个“/”(它不是一个分隔符)，定义垂直半径。 如果只提供一组值，这些值将用于垂直和水平半径(这显然是造成混淆的原因)。

因此，与您假设的不同——在您的示例中，10px 是左上角和右下角的水平半径。 5% 是右上角和左下角的水平半径。 '/'后的其他四个值分别是左上角、右上角、右下角和左下角的垂直半径。

所以请记住:在这两个站点上都可以使用简写形式(在“/”之前和之后)，因此您实际上可以拥有 2 到 8 个值之间的所有内容。

查看 border-radius 的文档.