当前位置：首页 > CSS

css圆环的制作

2026-04-02 18:12:23CSS

CSS圆环的制作方法

使用border-radius和border属性

通过设置元素的border-radius为50%使其变为圆形，再利用border属性控制圆环的粗细和颜色。调整元素的宽高和border的宽度可以改变圆环的大小和厚度。

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

使用伪元素叠加

通过伪元素（::before或::after）创建一个稍小的圆形，叠加在父元素上形成圆环效果。父元素设置较大的圆形，伪元素设置较小的圆形并居中。

css圆环的制作

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

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

使用box-shadow和clip-path

利用box-shadow在元素内部绘制阴影，再通过clip-path裁剪出圆环形状。这种方法适合需要复杂阴影效果的场景。

css圆环的制作

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

使用SVG或Canvas

对于动态或复杂的圆环（如进度条），可以使用SVG或Canvas实现。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渐变或动画增强圆环的视觉效果。例如，使用conic-gradient创建彩色圆环，或通过@keyframes实现旋转动画。

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

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.circle-animated {
  animation: spin 2s linear infinite;
}

以上方法可根据需求选择，静态圆环推荐使用border或伪元素，动态效果建议使用SVG或CSS动画。