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