CSS 空心圆

CSS 空心圆可以通过 border-radius 和 border 属性实现。我们可以设置 border-radius 为 50%，将正方形变成一个圆形。

空心圆

以下是创建空心圆的示例代码：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid black;
}

我们定义了一个 .circle 类，设置了宽度和高度为 100px，边框半径为 50%，即一个圆形。然后通过 border 属性设置了 2px 的黑色实线边框，从而实现了空心圆。

不规则形状的空心圆

我们也可以通过添加伪元素 ::before 和 ::after 来创建不规则形状的空心圆。以下是示例代码：

.circle {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
  border: 2px solid black;
}
.circle::before,
.circle::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 4px;
  background: black;
  border-radius: 2px;
  transform: rotate(45deg);
}
.circle::before {
  left: -2px;
}
.circle::after {
  right: -2px;
}

这里我们也定义了一个 .circle 类，设置了宽度和高度为 100px，并相对定位。我们通过 border-radius 和 border 属性创建了一个空心圆。

然后我们添加了两个伪元素 ::before 和 ::after，通过 content: "" 属性将其变为空元素。我们设置了它们的位置、宽度、背景颜色和边框半径，从而创建出两个直角三角形。通过 transform: rotate(45deg) 属性将其旋转 45 度，使其变成菱形，然后将其放置在圆形的左上角和右上角。

这样就可以创建出一个不规则形状的空心圆。

以上是 CSS 空心圆的介绍，希望对你有所帮助。