当前位置：首页 > CSS

css制作环形

2026-04-01 14:40:15CSS

使用 `border-radius` 和宽高相等的元素

创建一个宽高相等的正方形元素，将 border-radius 设置为 50%，使其变为圆形。通过调整 border 属性可以控制环形粗细和颜色。

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

使用 `conic-gradient` 实现动态环形

通过 CSS 的 conic-gradient 可以创建带有颜色渐变的环形效果。结合 mask 或 clip-path 可以进一步控制环形形状。

css制作环形

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

使用伪元素叠加

通过 ::before 或 ::after 伪元素创建一个稍小的同心圆，覆盖在底层圆上，形成环形效果。

css制作环形

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

.ring-with-pseudo::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: white;
  border-radius: 50%;
  top: 10px;
  left: 10px;
}

使用 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 动画和 stroke-dasharray（SVG）或 conic-gradient（CSS）可以实现动态环形进度效果。

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

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