为什么我的border-radius值有两个斜杠不起作用？

Question

这有效：

border-radius: .6em/.9em 0 1em;

这个字符串会被Chrome开发者工具打击：

border-radius: .6em/.9em 0 0 .6em/.9em;

我只需要为左角设置相等的border-radius。为什么它不起作用？

这也不起作用：

border-top-left-radius: 1em/2em;

Answer 1

规范只允许一个/，如下所示：border-radius: .6em 0 0 .6em / .9em 0 0 .9em

＆＃13;

＆＃13;

.round {
    background:red;
    height:200px;
    width:200px;
    border-radius: .6em 0 0 .6em / .9em 0 0 .9em
}

＆＃13;

<div class="round"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

border-radius的{​​{3}}是

Tx Rx Bx Lx / Ty Ry By Ly

x-radii和

之间可以有1到4个值

• 水平（x）半径为0的值，在这种情况下没有斜线，半径为圆形，或

• 垂直（y）半径的1-4个值。

你不能有两个斜杠。我认为你假设语法是Tx/Ty Rx/Ry Bx/By Lx/Ly但不幸的是情况并非如此。

此外，特定CSS属性（如border-top-left-radius）中的斜杠为most general syntax。如果你想要一个椭圆角半径，我必须通过border-radius来完成。