当前位置：首页 > CSS

css圆环制作

2026-02-13 03:30:19CSS

使用 border-radius 和 border 属性

通过设置元素的宽度和高度相等，并添加 border-radius: 50% 可以创建一个圆形。通过调整 border 的宽度和颜色，可以形成圆环效果。

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

使用伪元素叠加

通过伪元素（如 ::before 或 ::after）创建一个稍小的圆形，覆盖在父元素上，形成圆环效果。

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

.ring::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  background-color: white;
}

使用 conic-gradient 实现彩色圆环

通过 conic-gradient 可以创建渐变色圆环，结合 mask 或 clip-path 实现镂空效果。

.color-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(red, yellow, green, blue);
  mask: radial-gradient(transparent 35px, #000 36px);
}

使用 SVG 绘制圆环

SVG 的 <circle> 元素可以通过 stroke 和 stroke-width 属性直接绘制圆环。

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

使用 CSS 变量动态调整圆环

通过 CSS 变量可以动态调整圆环的大小、颜色和厚度，便于复用。

css圆环制作

.ring {
  --size: 100px;
  --thickness: 10px;
  --color: #3498db;

  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: var(--thickness) solid var(--color);
  background-color: transparent;
}

以上方法可以根据需求选择，灵活实现不同样式的圆环效果。