border-radius: 50% 生成圆或椭圆取决于元素宽高是否相等：相等则为正圆，不等则为椭圆；斜杠前百分比基于宽度、斜杠后基于高度，且需确保盒模型本身为正方形才能得到正圆。
border-radius百分比的计算逻辑是关键
因为border-radius中百分比值不是相对于父容器，而是分别按元素自身的width和height独立计算：斜杠前的百分比对应水平半径（基于宽度），斜杠后的对应垂直半径（基于高度）。当宽高不等时，50%就等于width * 0.5和height * 0.5——两个不等的数值，自然切出椭圆。
border-radius: 50% 为什么有时是圆、有时是椭圆
取决于元素是否为正方形：
- 若
width === height（比如200px × 200px），则50%→ 水平半径 = 垂直半径 =100px→ 正圆 - 若
width !== height（比如300px × 120px），则50%→ 水平半径 =150px，垂直半径 =60px→ 椭圆 - 即使写成
border-radius: 50%/50%，效果也等同于border-radius: 50%，因为斜杠后省略时会复制斜杠前的值
想强制正圆但又不想固定宽高？得先保证它是正方形
仅靠border-radius无法把长方形“拉成”正圆。常见误操作是给一个width: auto; height: 100px;的按钮设border-radius: 50%，结果得到的是压扁的椭圆。
- 真正起作用的是「元素盒模型本身的宽高比例」，不是圆角值本身
- 响应式场景下推荐用
aspect-ratio: 1 / 1约束为正方形（现代浏览器支持） - 兼容老浏览器可用
padding-bottom: 100%+height: 0+position: relative子元素绝对定位的技巧 - 别混用单位：
border-radius: 10px 50%在旧版 Safari 中可能被部分忽略
斜杠语法（/）才是控制椭圆精度的核心
默认的border-radius: 50%只是50% / 50%的简写。当你需要非对称椭圆或特殊裁切（比如半椭圆），必须显式使用斜杠分隔水平/垂直半径。
立即学习“前端免费学习笔记（深入）”；
-
border-radius: 100% / 50%→ 水平方向撑满，垂直方向只取一半高度 -
border-radius: 20% 80% / 40% 60%→ 四个角各自指定不同的椭圆半径组合 - 注意顺序：斜杠前是「左上、右上、右下、左下」的水平半径；斜杠后是同一顺序的垂直半径
- 表格元素若设了
border-collapse: collapse，border-radius直接失效，这点容易被忽略
实际开发中，最常踩的坑不是不会写50%，而是忘了检查元素渲染后的真实宽高是否相等——尤其在字体替换、内容动态插入、Flex/Grid 自动伸缩后，视觉上像正方形的盒子，DOM 中可能早已失衡。
