当前位置：首页 > CSS

css制作圆环

2026-01-28 08:39:16CSS

使用 border-radius 和 border 属性

通过设置元素的 border-radius 为 50% 使其变为圆形，再通过 border 属性调整边框宽度和颜色即可形成圆环。

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

使用伪元素实现渐变圆环

结合伪元素和 border 属性可以创建更复杂的圆环效果，例如渐变颜色的圆环。

.gradient-circle {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
  background-color: transparent;
}

.gradient-circle::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  border: 10px solid transparent;
  border-top-color: #3498db;
  border-bottom-color: #e74c3c;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  to { transform: rotate(360deg); }
}

使用 SVG 绘制圆环

SVG 提供更灵活的圆环绘制方式，适合需要动态调整的场景。

<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>

使用 CSS conic-gradient

通过 conic-gradient 可以创建彩色圆环，适合数据可视化场景。

.conic-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(
    #3498db 0% 25%,
    #e74c3c 25% 50%,
    #f1c40f 50% 75%,
    #2ecc71 75% 100%
  );
  mask: radial-gradient(transparent 35px, #000 36px);
}

使用 clip-path 裁剪

通过 clip-path 裁剪出环形区域，适合不规则圆环设计。

.clip-circle {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  clip-path: circle(40px at center);
  position: relative;
}

.clip-circle::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: white;
  border-radius: 50%;
  top: 20px;
  left: 20px;
}

css制作圆环