用css制作圆环

使用CSS制作圆环的方法

方法一：使用border和border-radius

通过设置元素的宽度和高度相同，并添加较大的border-radius值使其变为圆形。通过调整border的宽度和颜色，可以制作出圆环效果。

<div class="circle-ring"></div>

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

方法二：使用伪元素和transform

利用伪元素创建一个更大的圆形，并通过transform属性调整其位置，使其覆盖部分原始圆形，形成圆环效果。

<div class="circle-ring-advanced"></div>

.circle-ring-advanced {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #3498db;
}

.circle-ring-advanced::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: white;
}

方法三：使用CSS conic-gradient

利用CSS的conic-gradient函数创建一个环形渐变，通过调整起始和结束角度可以制作出圆环效果。

<div class="circle-ring-gradient"></div>

.circle-ring-gradient {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#3498db 0%, #3498db 80%, transparent 80%, transparent 100%);
}

方法四：使用SVG

虽然这不是纯CSS方法，但SVG与CSS结合可以更灵活地创建圆环效果。

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

方法五：使用box-shadow

通过box-shadow属性创建一个圆环效果，适合简单的圆环需求。

<div class="circle-ring-shadow"></div>

.circle-ring-shadow {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 0 0 10px #3498db;
  background-color: transparent;
}

每种方法都有其适用场景，可以根据具体需求选择合适的方法。纯CSS方法通常更轻量且易于维护，而SVG方法则更适合复杂的图形需求。