css如何画有弧度的线

作者：逐鹿↘星恒发布日期:2026-02-03 浏览:9

/* 使用 CSS 画有弧度的线 */

/* 方法一：使用 border-radius */
.arc-line {
  width: 200px;
  height: 20px;
  background-color: black;
  border-radius: 50% / 10%;
}

/* 方法二：使用 SVG */
<svg width="200" height="100">
  <path d="M10 80 Q 100 10 190 80" stroke="black" fill="transparent" stroke-width="4"/>
</svg>

/* 解释说明：
1. 方法一中，通过设置元素的宽度和高度，并使用 `border-radius` 属性来创建弧度效果。`border-radius: 50% / 10%;` 表示水平方向为 50%，垂直方向为 10% 的椭圆弧度。
2. 方法二中，使用了 SVG 的 `path` 元素，通过 `d` 属性定义路径。`M` 表示移动到起点，`Q` 表示二次贝塞尔曲线，最后两个参数是控制点和终点坐标。这样可以绘制出一条平滑的弧线。
*/

上一篇：css子元素选择器

下一篇：css文字颜色