只用 CSS 来创建圆。

  • 可以使用 border-radius: 50% 弯曲元素的边缘来创建圆。
  • 因为圆在任一点上都的半径都相同,所有元素的 widthheight 必须一样,否则所创建的就是个椭圆。

预览



HTML

<div class="circle"></div>

CSS

.circle {
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  background: #0f8bdac7;
}

翻译自:https://www.30secondsofcode.org/css/s/circle