Css画圆弧的方法

一、核心方法 1：border-radius 属性（最常用，适用于矩形 / 正方形的圆角 / 圆弧）

border-radius 是 CSS 绘制圆弧最基础、最高效的方式，本质是为元素的四个角设置圆角（圆弧），支持单独控制每个角，也支持设置椭圆弧。

1. 基本语法

• 简写形式：border-radius: 左上角 右上角 右下角 左下角;（顺时针顺序，可省略部分值，遵循 CSS 简写规则）
• 单独控制单个角：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
• 椭圆弧设置：每个角可传入两个值（水平半径 / 垂直半径），用 / 分隔，例如 border-radius: 50px/30px;

2. 关键示例

（1）绘制圆形（正圆弧闭合形态）

当元素为正方形，且 border-radius 设置为 50% 时，可得到完美圆形（本质是四个角的圆弧半径等于正方形边长的一半）：

.circle {
  width: 100px;
  height: 100px; /* 宽高相等，保证正方形 */
  background-color: #42b983;
  border-radius: 50%; /* 圆角半径为元素宽高的50%，形成圆形 */
}

（2）绘制单个圆角（圆弧）

单独为元素的某个角设置圆弧，适用于局部圆角场景：

.single-arc {
  width: 150px;
  height: 80px;
  background-color: #3498db;
  /* 仅左上角设置圆弧，半径30px */
  border-top-left-radius: 30px;
  /* 若要设置椭圆弧：border-top-left-radius: 40px/20px;（水平40px，垂直20px） */
}

（3）绘制矩形的全圆角（四个圆弧）

.round-rect {
  width: 200px;
  height: 100px;
  background-color: #e74c3c;
  border-radius: 16px; /* 四个角统一圆弧半径16px */
}

3. 特点

• 优点：语法简单、性能优异、兼容性极好（支持所有现代浏览器，包括 IE9+）
• 缺点：仅能基于矩形元素生成圆角 / 圆弧，无法绘制独立的、不闭合的圆弧（如半圆、1/4 圆弧的单独展示，需配合元素裁剪）

二、核心方法 2：CSS clip-path 属性（灵活绘制自定义圆弧 / 不规则弧形）

clip-path 是通过 "裁剪路径" 控制元素可见区域的方式，可绘制更灵活的圆弧形态，支持半圆、1/4 圆弧、自定义弧形等，甚至可以组合多种形状。

1. 核心用法（圆弧相关）

clip-path 常用 ellipse()（椭圆裁剪）、circle()（圆形裁剪）或 path()（自定义 SVG 路径）来实现圆弧效果，其中 path() 支持最灵活的圆弧绘制（需传入 SVG 路径语法）。

2. 关键示例

（1）绘制半圆（上半圆 / 下半圆）

/* 下半圆 */
.semi-circle-bottom {
  width: 100px;
  height: 50px;
  background-color: #9b59b6;
  /* clip-path: ellipse(水平半径 垂直半径 at 中心点x 中心点y) */
  clip-path: ellipse(50% 100% at 50% 100%); /* 以元素底部中点为中心，裁剪出下半圆 */
}

/* 上半圆 */
.semi-circle-top {
  width: 100px;
  height: 50px;
  background-color: #f39c12;
  clip-path: ellipse(50% 100% at 50% 0); /* 以元素顶部中点为中心，裁剪出上半圆 */
}

（2）用 path() 绘制自定义圆弧（更灵活）

path() 中使用 SVG 的圆弧指令 A（参数：rx ry x-axis-rotation large-arc-flag sweep-flag x y），可精准控制圆弧的半径、方向、起始点等：

.custom-arc {
  width: 200px;
  height: 200px;
  background-color: #1abc9c;
  /* SVG path语法：M(起始点) A(圆弧参数) L(连线) Z(闭合)，裁剪出1/4圆弧 */
  clip-path: path('M 100 100 A 80 80 0 0 1 180 180 L 100 180 L 100 100 Z');
}

3. 特点

• 优点：灵活性极高，可绘制任意形态的圆弧（半圆、1/4 圆弧、不规则弧形等），支持组合多种形状
• 缺点：语法相对复杂（尤其是 path() 需掌握 SVG 路径基础），兼容性略低于 border-radius（IE 浏览器不支持，现代浏览器需注意部分参数兼容）

三、补充：绘制独立不闭合圆弧（伪元素 / 背景配合）

如果需要绘制不闭合的圆弧 （仅圆弧线条，无填充），可结合 border-radius + border + 元素裁剪，或使用 SVG 配合 CSS，示例：

/* 不闭合的半圆弧形边框 */
.arc-border {
  width: 100px;
  height: 50px;
  border: 4px solid #34495e;
  border-top: none; /* 隐藏顶部边框，仅保留底部圆弧边框 */
  border-radius: 0 0 50px 50px; /* 底部圆角形成半圆弧形 */
  background: transparent;
}

总结

1. 简单圆角 / 圆形 / 矩形圆弧：优先使用 border-radius，语法简单、性能好、兼容性优
2. 自定义圆弧（半圆、1/4 圆弧、不规则弧形）：使用 clip-path，灵活性强
3. 不闭合圆弧线条：可通过 border-radius + border 裁剪实现，复杂场景可配合 SVG
4. border-radius 支持椭圆弧（双值语法），clip-path 支持更精准的圆弧控制（path() + SVG 指令）