border-radius: 50% 生成椭圆是因为其水平半径按 width×50%、垂直半径按 height×50% 计算，当宽高不等时必然形成椭圆；真圆需容器严格等宽高等条件。
因为 border-radius: 50% 不是“画一个半径为宽高一半的圆”，而是“把每个角的水平半径设为宽度的 50%，垂直半径设为高度的 50%”——只要 width ≠ height，结果必然是椭圆。
为什么 50% 会算出椭圆？
浏览器对 border-radius 百分比值的解析规则很明确：它分别按元素自身的 width 和 height 计算两个方向的半径。
- 水平方向（左/右圆角）半径 =
width × 50% - 垂直方向（上/下圆角）半径 =
height × 50% - 当
width: 200px; height: 100px;时，实际生成的是一个「水平半径 100px、垂直半径 50px」的椭圆轮廓 - 这个椭圆再被用来裁剪矩形内容区，视觉上就是标准椭圆
常见导致宽高不等的隐藏原因
你以为设了 border-radius: 50% 就万事大吉，但这些细节常让宽高悄悄失衡：
- 只写
width: 100px;没写height，高度由图片内容或文字撑开 → 高度不可控 - 用了
padding或border，但没设box-sizing: border-box→ 实际渲染尺寸 > 设定值 - 响应式中用
max-width: 100%+height: auto→ 宽度缩放，高度按比例变，但父容器不是正方形，子元素仍非正方 - 图片本身是长图（如 4:3），又没配合
object-fit: cover和固定容器尺寸 → 容器被拉变形
border-radius: 50% / 50% 是冗余写法吗？
不是冗余，是显式声明双轴半径。斜杠语法 border-radius: h-radius / v-radius 才真正暴露机制：
-
border-radius: 50% / 50%等价于border-radius: 50%（浏览器自动补全） -
border-radius: 100px / 50px强制水平半径 100px、垂直半径 50px，哪怕元素是正方形也会变椭圆 -
border-radius: 50% / 0可以做出“上半圆+直角底边”的效果，用于底部弧形背景 - 超过各方向最大可设值（如水平方向 >
width/2）会被截断，不会报错也不会警告
想画真圆，只靠 50% 远不够
50% 是“触发条件”，不是“保证条件”。真正起决定作用的是容器是否为严格正方形：
- 必须同时控制
width和height为相等的值（像素、rem、vmin 等绝对/相对单位均可） - 推荐优先用
aspect-ratio: 1/1+width，比硬写height更健壮（尤其在 flex/grid 布局中） - 加
border时务必配box-sizing: border-box，否则 border 会额外撑开总尺寸 - 图片类场景还要加
object-fit: cover和object-position: center，否则图像偏移或拉伸会让“圆”看起来歪了
最易被忽略的一点：伪元素画弧（比如底部半圆）时，border-radius: 50% 作用在宽高不等的伪元素上，本意就是生成椭圆——这时候“变成椭圆”反而是正确行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
