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）叠加一个稍小的圆形在父元素上，实现更复杂的圆环效果。父元素设置渐变背景，伪元素覆盖中心部分。

.gradient-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(45deg, #e74c3c, #3498db);
  position: relative;
}

.gradient-circle::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;
}

使用box-shadow制作多圆环效果

通过box-shadow属性为圆形元素添加多个阴影，每个阴影设置不同的偏移和颜色，形成同心圆环。

.multi-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 
    0 0 0 10px #e74c3c,
    0 0 0 20px #f39c12,
    0 0 0 30px #2ecc71;
}

SVG实现动态圆环

使用SVG的<circle>标签，通过stroke-dasharray和stroke-dashoffset属性控制圆环的进度条效果。

<svg width="120" height="120">
  <circle 
    cx="60" 
    cy="60" 
    r="50" 
    fill="transparent" 
    stroke="#3498db" 
    stroke-width="10"
    stroke-dasharray="314" 
    stroke-dashoffset="100" 
  />
</svg>

关键参数说明

• border-radius: 50%是形成圆形的核心属性。
• border的宽度决定圆环的粗细，颜色决定圆环外观。
• SVG中stroke-dasharray值为圆周长（2πr），stroke-dashoffset控制进度。