如何在 CSS 中创建一个带边框半径的椭圆？ [复制]答案

【问题标题】：How do you create an oval with border-radius in CSS? [duplicate]如何在 CSS 中创建一个带边框半径的椭圆？ [复制]
【发布时间】：2017-07-07 03:47:07
【问题描述】：

我需要一个椭圆形而不是圆角矩形。

这是我正在使用的代码。

div {
  position: fixed;
  border-radius: 25px;
  background: rgba(0,0,0,.5)
  width: 100px;
  height: 50px;
  top: calc(50% - 25px);
  right: calc(50% - 50px);
}

【问题讨论】：

标签： css

【解决方案1】：

只需改用border-radius: 50% :)

div {
  border-radius: 50%;
  background-color: rgba(0,0,0,0.5);
  width: 100px;
  height: 50px;
}

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

【讨论】：

【解决方案2】：

将border-radius 设置为百分比。

div {
  position: fixed;
  width: 100px;
  height: 50px;
  background: rgba(0,0,0,.5);
  border-radius: 50%;
}

【讨论】：

【解决方案3】：

试试这个link 这将解释您需要的所有不同形状。

以下是有关如何实现它的示例。

   #round {
      position: relative;
      width: 100px;
      height: 100px;
      margin: 20px 0;
      background: orange;
      border-radius: 48% / 25%;
      color: white;
    }
    #round:before {
      content: '';
      position: absolute;
      top: 10%;
      bottom: 11%;
      right: -5%;
      left: -5%;
      background: inherit;
      border-radius: 21% / 68%;
    }


    <div id="round"></div>

【讨论】：