css制作圆弧

使用 border-radius 属性

border-radius 是制作圆弧最常用的 CSS 属性。通过设置元素的 border-radius 值，可以创建不同弧度的圆角或完整圆形。border-radius 可以接受长度值（px、em、rem 等）或百分比值。

.rounded-box {
  border-radius: 10px; /* 四个角相同弧度 */
}

.circle {
  border-radius: 50%; /* 创建正圆形 */
}

.custom-arc {
  border-radius: 20px 10px 30px 5px; /* 分别设置四个角 */
}

使用单个角的 border-radius

如果需要单独控制某个角的弧度，可以使用 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius 属性。

.top-left-arc {
  border-top-left-radius: 15px;
}

.bottom-right-arc {
  border-bottom-right-radius: 20px;
}

创建椭圆形

通过为 border-radius 提供两个值（水平半径和垂直半径），可以创建椭圆形弧度。这两个值用斜杠(/)分隔。

.ellipse {
  border-radius: 50% / 30%; /* 水平半径50%，垂直半径30% */
}

.custom-ellipse {
  border-radius: 100px 50px / 50px 25px; /* 四个角分别设置 */
}

使用 clip-path 创建复杂圆弧

clip-path 属性可以创建更复杂的圆弧形状，包括非对称圆弧和部分圆弧。可以使用 circle()、ellipse() 或 path() 函数。

.circle-clip {
  clip-path: circle(50% at 50% 50%);
}

.ellipse-clip {
  clip-path: ellipse(50% 30% at 50% 50%);
}

.custom-arc-clip {
  clip-path: path('M 0 0 L 100 0 A 50 50 0 0 1 100 100 L 0 100 Z');
}

使用 SVG 创建圆弧

对于更复杂的圆弧效果，可以结合 SVG 来实现。SVG 的 path 元素可以精确控制圆弧的起点、终点、半径和方向。

<svg width="200" height="200">
  <path d="M 50 150 A 100 50 0 0 1 150 150" fill="none" stroke="black" stroke-width="2"/>
</svg>

使用 CSS 渐变创建圆弧效果

通过 CSS 的径向渐变(radial-gradient)可以模拟圆弧视觉效果，特别是在需要圆弧背景时。

.gradient-arc {
  background: radial-gradient(circle at center, transparent 60%, #f00 60%);
}

动画圆弧

使用 CSS 动画或过渡可以为圆弧效果添加动态变化，使圆弧平滑变形或移动。

.animated-arc {
  border-radius: 10px;
  transition: border-radius 0.5s ease;
}

.animated-arc:hover {
  border-radius: 50%;
}