左右圆的border-radius，宽度和高度不等，高度可变

Question

这就是我想要实现的目标：

由于宽度和高度不相等，设置border-radius:50%给出的椭圆不是我想达到的。 如果高度固定，那么给定固定大小（如border-radius:20px）会有效但是如何才能使高度可变？

Answer 1

只需将border-radius设置为360px或更高：

＆＃13;

＆＃13;

    div {
      height:80px;
      width:400px;
      border-radius:360px;
      border:2px solid #333;
    }

＆＃13;

<div>
</div>

＆＃13;

＆＃13;

＆＃13;

这样你就会有完美的圆角。

来源：link

Answer 2

将border-radius设置为更高的值：

border-radius: 9999px;