带分割的边界半径

Question

当涉及到除法时，我很难理解Mozilla对边界半径属性 的解释。

示例：

/* (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

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

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

第一组值定义水平半径。 并且可选的第二组值，前面有一个“/”（它不是除法），定义了垂直半径。 如果仅提供一组值，则这些值用于垂直和水平半径（显然是混淆的原因）。

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

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

查看border-radius的文档。