当前位置：首页 > CSS

css制作圆弧

2026-01-28 00:10:26CSS

使用 `border-radius` 属性

通过 border-radius 可以轻松实现圆弧效果。该属性接受一个或多个值，用于定义元素的圆角半径。例如：

.arc {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
}

border-radius: 50% 会将元素变为圆形。若需部分圆弧，可调整宽高比例或使用百分比值。

自定义部分圆弧

若需绘制非完整的圆弧（如四分之一圆），可以结合 border-radius 和透明边框：

.partial-arc {
  width: 100px;
  height: 100px;
  border: 10px solid #3498db;
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
}

此例仅显示左下角的四分之一圆弧，通过隐藏其他边框实现。

使用 `clip-path` 裁剪路径

clip-path 允许通过路径或基本形状裁剪元素，适合复杂圆弧：

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

circle() 函数定义圆形裁剪区域，参数为半径和圆心位置。还可使用 ellipse() 或自定义路径。

SVG 绘制圆弧

SVG 提供更灵活的圆弧绘制方式，适合动态或复杂需求：

<svg width="100" height="100">
  <path d="M 50,50 L 50,0 A 50,50 0 0 1 100,50 Z" fill="#3498db" />
</svg>

通过 path 的 A 命令定义圆弧参数（半径、起始点、终点等），结合 CSS 控制样式。

渐变与动画增强效果

结合 CSS 渐变和动画可提升圆弧的视觉效果：

css制作圆弧

.animated-arc {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#3498db 0%, #e74c3c 50%, #2ecc71 100%);
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

conic-gradient 创建锥形渐变，配合旋转动画实现动态圆弧。