当前位置：首页 > CSS

圆环css制作

2026-04-01 07:02:32CSS

圆环CSS制作方法

使用CSS制作圆环可以通过多种方式实现，以下是几种常见的方法：

使用border-radius和border属性

通过设置元素的border-radius为50%使其成为圆形，再通过调整border属性来创建圆环效果。

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

使用伪元素和transform

利用伪元素创建圆环，通过transform属性进行定位和旋转。

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

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

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

使用SVG

SVG是一种矢量图形格式，非常适合创建圆环。

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

使用CSS conic-gradient

利用CSS的conic-gradient可以创建彩色圆环。

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

使用clip-path

通过clip-path属性裁剪元素，形成圆环。

.clip-ring {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  clip-path: circle(40px at 50% 50%);
}

动态圆环制作

如果需要制作动态圆环（如进度条），可以使用CSS动画和stroke-dasharray属性（SVG）。

圆环css制作

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="#eee" stroke-width="10" fill="none" />
  <circle cx="50" cy="50" r="40" stroke="#3498db" stroke-width="10" fill="none" 
          stroke-dasharray="251.2" stroke-dashoffset="251.2" 
          style="animation: fill 2s linear forwards" />
</svg>

<style>
@keyframes fill {
  to { stroke-dashoffset: 125.6; } /* 50% progress */
}
</style>

以上方法可以根据具体需求选择，每种方法都有其适用场景和优缺点。