仅使用 css 的边框半径圆角答案

【问题标题】：border radius rounded corner with css only仅使用 css 的边框半径圆角
【发布时间】：2015-03-27 17:43:57
【问题描述】：

我可以仅使用 css 来实现吗？

50% does not work on rectangle

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

【问题讨论】：

如果不需要固定高度，可以给元素设置min-height。
我会这样做：jsfiddle.net/lharby/5sanz08e 并且不要忘记供应商前缀。
@lharby 当盒子的内容很大时它会失败：jsfiddle.net/5sanz08e/2 - 此外，现在border-radius不需要使用供应商前缀。
这个相关问题可能对stackoverflow.com/questions/29048234/… 有所帮助，尽管它适用于流体高度而不是流体高度。
问题中是否指定了div里面会有文字内容？

标签： css css-shapes

【解决方案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>

【讨论】：

【解决方案2】：

试试这个

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

&lt;div&gt;&lt;/div&gt;

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

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

&lt;div&gt;&lt;/div&gt;

【讨论】：

我可以在没有固定高度的矩形上实现吗？
@Timeless 没有固定高度？？
@Timeless 里面有文字吗？
@Timeless 他发布的css在示例中没有错，有一个固定的高度，但你可以像height:auto;一样很好地使用一些东西。因为问题是关于圆角和所有那些将是border-radius:50px; 的遮阳篷。有关它的更多信息，请查看here。
@maam27 检查这个fiddle 我使用了50px，但效果不佳，所以我使用了50vw

【解决方案3】：

有一个窍门

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

例如{border-radius:10000px;}

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

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

&lt;div class="rect"&gt;&lt;/div&gt;

【讨论】：

这会起作用，问题是您的小提琴使用百分比作为边框半径，而不是您在答案中显示的高像素值。另外，请在问题本身中添加示例代码。
@web-tiki 感谢您指出错误！我没有更新 jsFiddle :D，现在很好！
@web-tiki 感谢编辑！

【解决方案4】：

它适用于我，下面是我的代码 sn-p

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

<div>
</div>

【讨论】：

您可能需要仔细检查您的最终结果，OP 想要一个带圆角的矩形，此代码生成一个椭圆形。