当前位置：首页 > CSS

css制作圆环

2026-02-13 03:04:54CSS

使用 border-radius 和 border 属性

通过设置元素的 border-radius 为 50% 将其变为圆形，再通过 border 属性控制圆环的宽度和颜色。调整 width 和 height 控制圆环大小。

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

使用伪元素叠加

通过伪元素（如 ::before 或 ::after）创建一个稍小的圆形，叠加在父元素上形成圆环效果。父元素需设置 position: relative，伪元素设置 position: absolute。

css制作圆环

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

.circle::before {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: white;
  top: 10px;
  left: 10px;
}

使用 conic-gradient 渐变

通过 CSS 的 conic-gradient 创建环形渐变，结合 mask 或 clip-path 实现圆环效果。适用于需要分段颜色或动态进度环的场景。

css制作圆环

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#3498db 0% 75%, #eee 75% 100%);
  mask: radial-gradient(transparent 35px, black 36px);
}

SVG 实现圆环

使用 SVG 的 <circle> 元素，通过 stroke 和 stroke-dasharray 属性控制圆环样式和进度。适合需要动画或精确控制的场景。

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

结合 border 和 keyframes 实现旋转或颜色变化的动态圆环。通过调整 border-top-color 等属性实现加载动画效果。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #eee;
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}

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