当前位置：首页 > CSS

css制作环形

2026-01-28 11:36:24CSS

使用 border-radius 和 border 属性

通过设置元素的 border-radius 为 50% 将其变为圆形，再通过 border 属性控制边框宽度和颜色。调整宽度和高度相同，边框透明部分可形成环形效果。

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

使用伪元素叠加

通过 ::before 或 ::after 伪元素创建内层圆，外层圆通过父元素实现，两者叠加形成环形。

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

使用 radial-gradient 背景

通过 CSS 的 radial-gradient 绘制环形背景，控制渐变的起始和结束位置形成环形。

.gradient-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(
    circle, 
    transparent 40%, 
    #3498db 40%, 
    #3498db 60%, 
    transparent 60%
  );
}

使用 SVG 实现

SVG 的 <circle> 元素直接支持环形绘制，通过 stroke 和 fill 属性控制样式。

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

使用 clip-path 裁剪

通过 clip-path 裁剪出环形区域，结合背景色或图片填充。

css制作环形

.clip-ring {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  clip-path: circle(50% at 50% 50%);
  position: relative;
}
.clip-ring::after {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  background-color: white;
  clip-path: circle(50% at 50% 50%);
}