边界半径与分裂
当涉及分裂时,我很难理解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的文档.