当前位置：首页 > CSS

css制作圆环

2026-04-01 11:36:26CSS

使用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）创建内层圆，覆盖部分背景形成圆环效果。

css制作圆环

.ring {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #3498db;
  border-radius: 50%;
}
.ring::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: white;
  border-radius: 50%;
}

使用conic-gradient渐变

通过CSS的conic-gradient绘制环形渐变，结合mask或clip-path裁剪出圆环形状。

css制作圆环

.conic-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#3498db 0deg, #3498db 270deg, transparent 270deg);
  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>

动画圆环（加载效果）

结合@keyframes和border属性实现动态圆环，常用于加载动画。

.loading-ring {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}