Question

在涉及分割时，我很难理解Mozilla's对边界半径属性的解释。

示例：

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

我知道第一个值10px是半径的宽度，5%是高度。我无法了解/之后的数字对他们的影响。

Answer 1

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

我认为以下图片完美地解释了它：

第一组值定义水平半径。并且可选地，第二组值以'/'（它不是分区）开头，定义垂直半径。 如果只提供了一组值，则这些值用于垂直和水平半径（显然是混淆的原因）。

所以你错了 - 在你的例子中，10px是左上角和右下角的水平半径。而5%是左上角和左下角的水平半径。 '/'后的其他四个值是左上角，右上角，右下角和左下角的垂直半径。

所以请记住：在两个网站上都有可能存在的短路（在'/'之前和之后），因此你可以拥有2到8个值之间的所有短信。）

查看border-radius的文档。