使用纯CSS创建圆形

HTML

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

CSS

.circle {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  background: #333;
}

说明

border-radius: 50% 弯曲元素的边框以创建圆。

由于圆在任何给定点具有相同的半径，因此width 和height 一定是一样的。不同的值将创建椭圆。