在 CSS 中创建圆圈

在 CSS 中创建圆圈很简单，主要可以使用以下两种方法：

1. 使用 border-radius 属性

使用 border-radius 属性可以很方便地实现圆形的效果。

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

上面的代码中，border-radius 属性值为 50%，表示将元素的宽和高的一半作为圆的半径，从而实现圆形的效果。

2. 使用伪元素

另一种实现方式是使用伪元素 ::before 或 ::after 来创建一个圆形的背景，并将其放置在元素的中心位置。

.circle {
  position: relative;
  width: 50px;
  height: 50px;
}

.circle::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
}

上面的代码中，::before 伪元素使用绝对定位，将其放置在元素的中心位置。然后可以设置其宽、高和背景色来实现圆形的效果。

以上两种方法都可以很方便地创建圆形的效果，根据实际情况选择即可。