边框半径圆角，仅限css

Question

我能用css实现这个吗？

50% does not work on rectangle

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

div{
    width:200px;
    height:100px;
    background:lightblue;
    border-radius:50px;
  border:2px solid black
}

<div></div>

编辑：使用50vw使其响应任何高度都可以

div{
    width:500px;
    height:300px;
    background:orange;
    border-radius:50vw;
}

<div></div>

Answer 3

有一个技巧

只是我们一个非常大的 border-radius 值！

e.g。 {border-radius:10000px;}

以下是演示链接（尝试更改宽度/高度以查看工作情况）：http://jsfiddle.net/890z699p/

＆＃13;

＆＃13;

.rect {
  width: 300px;
  height: 200px;
  background: #000;
  border-radius: 10000px;
}

＆＃13;

<div class="rect"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

它适用于我，下面是我的代码片段

div {
  display: block;
  border-radius: 50%;
  width: 200px;
  height: 100px;
  border: 2px solid #000;
  background-color: #009EE0;
}

<div>
</div>