CSS border-radius xy 是否存在？

Question

假设我们有简单的 div 并且他的宽度！=高度。

<div id="test"></div>

和CSS看起来像：

#test {
    width: 200px;
    height: 50px;
    border-radius: 30%;
    border: 5px solid black;
}

百分比border-radius使较长的边更加弯曲。该值px将使边框同样弯曲：

#test{
    border-radius: 30px;
}

我的问题是，有没有一种方法（使用 CSS）来操纵这个比例px（独立于改变 div 大小）并使 div 的短边更加弯曲？或者只能通过画布来实现。

Answer 1

写这个问题我找到了答案： CSS PIE support

可以通过在值之间使用斜杠来实现：

border-radius: 10px / 30px;

Answer 2

如果您希望所有圆角看起来都相同，则可以使用两个值之间带有斜杠，或者您可以使用单个角的选择器并使用两个不带斜杠的值来获得每个角的独立结果，例如border-top-left-radius: 45px 80px;

这是三个示例（我添加了一个对称的示例，与您问题中的示例类似）：

.x {
  width: 300px;
  height: 200px;
  border: 2px solid green;
  border-radius: 45px / 80px;
}
.y {
  width: 300px;
  height: 200px;
  margin-top: 30px;
  border: 2px solid red;
  border-top-left-radius: 45px 80px;
  border-top-right-radius: 125px 60px;
}
.z {
  width: 300px;
  height: 100px;
  margin-top: 30px;
  border: 2px solid blue;
  border-top-left-radius: 80px 65px;
  border-bottom-left-radius: 80px 65px;
  border-top-right-radius: 80px 65px;
  border-bottom-right-radius: 80px 65px;
}

<div class="x"></div>
<div class="y"></div>
<div class="z"></div>