当前位置：首页 > CSS

css制作圆弧

2026-01-08 21:05:34CSS

CSS 制作圆弧的方法

使用 border-radius 属性 通过 border-radius 可以轻松创建圆弧效果。该属性控制元素的圆角大小，值越大圆弧越明显。例如：

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

这会生成一个圆形，通过调整宽高比例可以生成椭圆。

部分圆弧的实现 若需生成部分圆弧（如四分之一圆），可以结合 border 和透明边框：

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

此代码会生成一个红色的四分之一圆弧。

使用 clip-path 创建复杂圆弧 clip-path 允许更灵活的弧形裁剪，支持 SVG 路径或基本形状：

.custom-arc {
  width: 200px;
  height: 100px;
  clip-path: path('M 0,100 A 100,50 0 0 1 200,100 L 200,0 A 100,50 0 0 0 0,0 Z');
  background: #2ecc71;
}

通过 SVG 路径定义，可以精确控制弧形的形状和位置。

渐变背景模拟圆弧 线性渐变或径向渐变可以辅助实现视觉上的弧形效果：

.gradient-arc {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at center, #9b59b6 0%, transparent 70%);
}

此方法适合需要柔和边缘或特殊光效的场景。

动画效果的圆弧 结合 CSS 动画让圆弧动态变化：

css制作圆弧

.animated-arc {
  width: 120px;
  height: 120px;
  border: 15px solid #f1c40f;
  border-radius: 50%;
  border-right-color: transparent;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

这会生成一个旋转的加载指示器样式的圆弧。