当涉及分割时,我很难理解边界半径属性的解释。
例子:
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;
我知道第一个值
10px
是半径的宽度,5%
是高度。我不明白他们是如何受到/
后面数字的影响的。一个样本:Mozilla's
最佳答案
你可以给每个角落两个值(所以最大值是8个值),这是两个方向的半径(水平/垂直)。
我认为下面的图片很好地解释了这一点:
第一组值定义水平半径。第二组值前面有一个“/”(它不是除数)定义了垂直半径。如果只提供一组值,则这些值同时用于垂直半径和水平半径(很明显,造成混淆的原因是什么)。
所以你错了-在你的例子中10px
是左上角和右下角的水平半径。5%
是右上角和左下角的水平半径。“/”后面的其他四个值是左上角、右上角、右下角和左下角的垂直半径。
所以请记住:在这两个站点上都可能有速记(在“/”之前和之后),所以您可以真正拥有2到8个值之间的所有内容。
查看border-radius的文档。
关于html - 边界半径除法,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38493828/