border-radius: 50% 画不出正圆的根本原因是宽高不等，因其百分比值按width和height分别计算：水平半径=width×50%，垂直半径=height×50%，仅当width===height时才形成正圆；否则为椭圆。
能直接用 border-radius 实现半圆和圆，但必须满足尺寸约束；圆角不是“画弧”，而是裁剪矩形四角——理解这点才能避开多数坑。
为什么 border-radius: 50% 有时画不出正圆？
因为 border-radius 的百分比是按元素自身宽高分别计算的：水平方向用宽度的百分比，垂直方向用高度的百分比。只有当 width === height 时，50% 才会生成正圆。
- ✅ 正确：宽高都是
120px，border-radius: 50%→ 完美圆形 - ❌ 错误：宽
200px、高100px，border-radius: 50%→ 椭圆（水平半径 100px，垂直半径 50px） - ⚠️ 注意：
border-radius: 60%在非正方形上无效——最大生效值就是各方向边长的一半，超出部分会被截断
border-radius 四值写法怎么控制半圆方向？
顺序固定为：左上、右上、右下、左下。半圆本质是「两个角圆、两个角直」+「高宽比例匹配」。
- 上半圆：宽
200px、高100px，border-radius: 100px 100px 0 0 - 下半圆：
border-radius: 0 0 100px 100px - 左半圆：宽
100px、高200px，border-radius: 0 100px 100px 0 - 右半圆：
border-radius: 100px 0 0 100px - ⚠️ 关键：圆角值必须等于「对应方向边长的一半」，比如右半圆的上下圆角值应等于高度的一半（
200px / 2 = 100px），不能瞎填50px
用伪元素画半圆比直接设 border-radius 更灵活？
是的，尤其当容器尺寸不确定或需要动态缩放时。核心思路是：父容器设 overflow: hidden，伪元素画整圆并定位裁剪。
- 父容器只需设定宽高比（如
aspect-ratio: 2/1），不用硬编码像素值 - 伪元素用
border-radius: 50%+top: -100%或transform: translateY(-50%)控制露出区域 - 示例（上半圆）：
.half { width: 100%; aspect-ratio: 2/1; overflow: hidden; position: relative; }<br>.half::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 200%; border-radius: 50%; background: #3498db; } - ⚠️ 坑点：IE 不支持
aspect-ratio，需 fallback 到固定宽高；overflow: hidden必须加在父容器，否则伪元素会溢出
想画独立圆弧（比如 90° 扇形）该用什么？
border-radius 只能处理矩形四角，无法生成不闭合的独立圆弧；此时必须用 clip-path 或 SVG。
- 简单扇形可用
clip-path: circle()或clip-path: ellipse()裁剪圆形后取局部 - 精确角度推荐 SVG：
<path d="M50,50 A50,50 0 0,1 100,50"></path>（从 (50,50) 画 90° 圆弧到 (100,50)） - ⚠️ 注意：
clip-path的path()语法复杂，且 Safari 对部分函数支持滞后；若需兼容性，优先考虑 SVG
真正容易被忽略的是：所有这些形状都依赖盒模型边界——padding、border、box-sizing 都会影响最终渲染尺寸。画之前先确认 box-sizing: border-box，否则圆角可能错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
