当前位置：首页 > CSS

css制作环形

2026-03-11 18:35:01CSS

使用CSS制作环形的方法

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

创建一个宽高相等的正方形元素，将border-radius设置为50%即可生成圆形。通过调整border属性可以制作环形。

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

使用伪元素和transform

通过伪元素和旋转动画可以制作动态环形效果。

css制作环形

.ring {
  position: relative;
  width: 100px;
  height: 100px;
}

.ring::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 10px solid transparent;
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

使用conic-gradient

CSS的圆锥渐变可以创建彩色环形效果。

css制作环形

.color-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  mask: radial-gradient(transparent 35px, #000 36px);
}

使用SVG内联

直接在HTML中使用SVG元素创建环形，这种方法更灵活且支持复杂效果。

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

使用box-shadow

通过多层box-shadow可以创建特殊效果的环形。

.shadow-ring {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 
    0 0 0 10px #3498db,
    0 0 0 20px #e74c3c,
    0 0 0 30px #2ecc71;
}

每种方法适用于不同场景，border-radius方法最简单，SVG方法最灵活，conic-gradient适合彩色效果，box-shadow适合多层环形效果。