仅使用 css 的边框半径圆角

Tim*_*ess 1 css css-shapes

在此处输入图片说明

我可以只用 css 来实现吗?

50% 不适用于矩形

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

Has*_*ami 5

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

div {
  display: inline-block;
  border-radius: 50px / 50%;
  
  padding: 1em 2em;
  border: 2px solid #000;
  background-color: #009EE0;
  text-align: center; 
}
Run Code Online (Sandbox Code Playgroud)
<div>
  Stuff goes <br>
  here... <br>
  & here... <br>
  Setting a fixed value of horizontal border-radius does the trick!
</div>
Run Code Online (Sandbox Code Playgroud)

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

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

  padding: 1em 2em;
  border: 2px solid #000;
  background-color: #009EE0;
  text-align: center; 
}
Run Code Online (Sandbox Code Playgroud)
<div>
  Stuff goes <br>
  here... <br>
  & here... <br>
  Or set a different percentage value for horizontal border-radius
</div>
Run Code Online (Sandbox Code Playgroud)