[分享]css两层空心圆套在一起

在CSS中，我们可以使用多种方式绘制圆形，其中一种方法是使用 ::before 和 ::after 伪元素画两个层叠的空心圆。这种方法可以轻松地实现圆形进度条等设计效果。.circle { : rel...

在CSS中，我们可以使用多种方式绘制圆形，其中一种方法是使用 ::before 和 ::after 伪元素画两个层叠的空心圆。这种方法可以轻松地实现圆形进度条等设计效果。

.circle {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 6px solid #ccc;
}

.circle::before, .circle::after {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50%;
  border: 6px solid #f00;
}

.circle::after {
  border-color: #0000ff;
  z-index: -1;
} 

首先我们创建一个 .circle 类，设置宽高和圆角半径为50%，然后添加一个宽度为6像素、颜色为灰色的边框，这是圆的外边框。接下来，我们使用 ::before 和 ::after 伪元素，为了展现两个空心圆环。这两个空心圆的半径比父容器小6像素，也就是外边框的宽度。使用 position: absolute 将它们定位到圆的中心，同时把宽度设置为父元素的宽度再减去12像素，实现空心效果。我们可以通过调整 border-color属性来改变圆的颜色，也可以使用 z-index 属性来控制两个圆的叠放次序。

因为两个圆的位置重合，所以我们需要通过 z-index 属性来控制它们的叠放先后顺序。在上面的代码中，我们把里面的圆（也就是 ::after 元素）的 z-index 值设置为-1，让它显示在外面的圆的下面。这样我们就实现了两个层叠的空心圆了。