Question

我需要一个椭圆形而不是一个带圆边的矩形。

这是我正在使用的代码。

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

Answer 1

只需使用border-radius: 50%代替:)

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 2

将border-radius设为百分比。

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

Answer 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>

如何在CSS中创建带边框半径的椭圆？

3 个答案: