css圆环制作

使用 border-radius 和 border 属性

通过设置元素的宽度和高度相等，并应用 border-radius: 50% 可以创建圆形。结合 border 属性调整边框宽度和颜色，可以实现圆环效果。例如：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #3498db;
  background-color: transparent;
}

使用伪元素实现渐变圆环

通过伪元素（如 ::before 或 ::after）叠加多个圆形，结合 background 的渐变属性，可以制作更复杂的圆环。例如：

.ring {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#3498db 0%, #e74c3c 100%);
}
.ring::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: white;
}

使用 SVG 绘制圆环

SVG 的 <circle> 元素通过 stroke 和 stroke-dasharray 属性可以精确控制圆环的样式和动画。例如：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="none" stroke="#3498db" stroke-width="10" />
</svg>

结合 clip-path 和动画

使用 clip-path 裁剪元素为圆形，并配合 CSS 动画实现动态圆环效果。例如：

.animated-ring {
  width: 100px;
  height: 100px;
  background: #3498db;
  clip-path: circle(50%);
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

使用 box-shadow 实现多重圆环

通过 box-shadow 属性叠加多个阴影，可以创建同心圆环效果。例如：

.multi-ring {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 
    0 0 0 10px #3498db,
    0 0 0 20px #e74c3c;
}