[分享]css3实现圆环效果

CSS3是前端开发不可或缺的一部分，在界面设计中可以用它实现许多特效。今天我们来学习如何用CSS3实现圆环效果。

.circle {
  margin: 50px auto;
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #f5f5f5;
  border-radius: 50%;
  box-shadow: inset 0 0 10px #ddd;
}

.circle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip: rect(0, 100px, 200px, 0);
  border-radius: 50%;
  transform: rotate(-135deg);
  background-color: #27ae60;
}

.circle:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip: rect(0, 100px, 200px, 0);
  border-radius: 50%;
  transform: rotate(45deg);
  background-color: #c0392b;
} 

我们在HTML中创建一个类为“circle”的div容器，并设置宽度和高度。在CSS中，我们设置圆角为50%以将矩形转换为圆形。我们使用“box-shadow”属性为圆环添加一点深度。接着，我们在“circle”类的“before”伪元素中添加一个绿色的圆环，将其截取并旋转-135度，可将其转换为一个圆环。最后，我们在“circle”类的“after”伪元素中添加一个红色的圆环并将其截取并旋转45度，可得到另一个圆环。通过将这两个圆环细微偏移并调整，可使它们重合并形成完整的圆环。