当前位置：首页 > CSS

css圆环制作

2026-01-28 09:04:24CSS

使用border-radius和边框制作圆环

通过设置元素的宽高相等，并利用border-radius: 50%将其变为圆形。通过调整边框宽度和颜色，可以形成圆环效果。透明背景或边框颜色差异能突出圆环。

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

使用伪元素叠加实现圆环

通过伪元素（如::before或::after）创建另一个圆形，并调整其尺寸和定位，覆盖在原始圆形上形成圆环。需确保伪元素尺寸略小且居中。

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

使用conic-gradient制作动态圆环

通过CSS的conic-gradient可以创建带有颜色渐变的圆环，适合展示进度或比例。结合mask或clip-path可控制显示范围。

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

使用SVG绘制圆环

SVG的<circle>元素通过stroke和stroke-dasharray属性可以灵活控制圆环样式和动画，适合复杂需求。

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

圆环动画效果

通过CSS动画或SVG的stroke-dashoffset属性可以实现圆环加载动画。以下示例展示CSS旋转动画：

css圆环制作

.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); }
}