css制作环形

使用CSS制作环形

制作环形有多种方法，以下是几种常见且实用的CSS实现方式：

使用border-radius和border属性

通过设置元素的border-radius为50%使其变为圆形，再通过调整border的宽度和颜色实现环形效果。

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

使用伪元素和transform

利用伪元素创建环形，通过transform属性控制其位置和形状。

.ring {
  position: relative;
  width: 100px;
  height: 100px;
}
.ring::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 10px solid #e74c3c;
  box-sizing: border-box;
}

使用clip-path属性

通过clip-path属性裁剪元素形状，结合border或box-shadow实现环形。

.clip-ring {
  width: 100px;
  height: 100px;
  background-color: #2ecc71;
  clip-path: circle(50% at 50% 50%);
  border: 10px solid #27ae60;
}

使用SVG内联

直接在HTML中嵌入SVG代码，通过SVG的circle元素实现环形。

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

使用conic-gradient

通过CSS的conic-gradient实现环形渐变效果。

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

以上方法可以根据具体需求选择，每种方式均有其适用场景和优缺点。