当前位置：首页 > CSS

css圆环制作

2026-03-11 15:57:13CSS

使用 border-radius 和 border 属性

通过设置元素的 border-radius 为 50% 使其变为圆形，再利用 border 属性调整边框宽度和颜色即可形成圆环。示例代码：

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

使用伪元素和 transform

通过伪元素叠加实现更复杂的圆环效果。父元素设为圆形，伪元素通过 transform 控制旋转和缩放：

css圆环制作

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

SVG 实现圆环

使用 SVG 的 <circle> 标签可以更灵活地控制圆环属性：

css圆环制作

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

渐变颜色圆环

结合 CSS 渐变和边框属性创建彩色圆环：

.gradient-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 8px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #9c27b0, #2196f3) border-box;
}

动画旋转圆环

添加 animation 实现动态旋转效果：

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