仅使用 css 的边框半径圆角

Question

我可以只用 css 来实现吗？

50% 不适用于矩形

还有一件事：没有固定的高度。

Answer 1

一种选择是为水平设置一个固定值，border-radius如下所示：

div {
  display: inline-block;
  border-radius: 50px / 50%;
  
  padding: 1em 2em;
  border: 2px solid #000;
  background-color: #009EE0;
  text-align: center; 
}

<div>
  Stuff goes <br>
  here... <br>
  & here... <br>
  Setting a fixed value of horizontal border-radius does the trick!
</div>

您可能还想使用不同的百分比值：

div {
  display: inline-block;
  border-radius: 12% / 50%;

  padding: 1em 2em;
  border: 2px solid #000;
  background-color: #009EE0;
  text-align: center; 
}

<div>
  Stuff goes <br>
  here... <br>
  & here... <br>
  Or set a different percentage value for horizontal border-radius
</div>