根本原因是元素宽高不等：border-radius: 50%按宽度和高度分别计算圆角半径，宽高不等时横向与纵向半径不同，必然呈现椭圆；必须确保width与height数值严格相等，并配合overflow: hidden和object-fit: cover才能实现真圆。
只加 border-radius: 50% 不一定出圆——根本原因是图片容器宽高不等，或内容没被正确裁剪。
为什么图片加了 border-radius: 50% 还是椭圆？
浏览器按盒模型计算圆角：border-radius: 50% 是分别取宽度和高度的 50% 作为水平/垂直方向的圆角半径。如果 width 是 100px、height 是 80px，结果就是横向半径 50px、纵向半径 40px → 椭圆。
- 必须保证容器宽高数值完全相等（如都设
64px，不能一个用64px、一个用auto） -
img标签默认是 inline 元素，若未显式设宽高，其尺寸由原始图决定，极易失衡 - 用
max-width: 100%或height: auto会破坏等比约束，直接放弃响应式写法
用 img 标签做圆形头像的最小可靠组合
四个属性缺一不可，且必须作用于同一元素（通常是 img 自身）：
-
width和height设为相同固定值（如48px）或响应式等值类（如 Tailwind 的w-12 h-12） -
border-radius: 50%（或 Tailwind 的rounded-full） -
overflow: hidden（Tailwind 中为overflow-hidden）——否则超出部分照常显示，“圆角”被掩盖 -
object-fit: cover（Tailwind 中为object-cover）——防止拉伸变形，确保人脸居中裁切
示例（原生 CSS）：
.avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; object-fit: cover; }
示例（Tailwind）：<img src="a.jpg" class="w-12 h-12 rounded-full overflow-hidden object-cover">
响应式或尺寸不可控时怎么保圆？
当需要适配不同屏幕，或头像源图宽高比不确定（比如用户上传的 400×300 图），仅靠固定宽高 + border-radius 会失效。
- 优先用
aspect-square（Tailwind v3.3+）替代手动写aspect-ratio: 1/1，它自动 fallback 到padding-top: 100%方案，兼容 Safari 等旧浏览器 -
aspect-square必须加在**容器**（如div）上，不能直接加在img上 - 容器加
rounded-full overflow-hidden，img加w-full h-full object-cover - 服务端统一返回正方形图是最稳妥的方案；前端兜底可用
aspect-square+object-fit组合
结构示例：
<div class="w-16 sm:w-20 aspect-square rounded-full overflow-hidden bg-gray-200"> @@##@@ </div>
容易被忽略的细节和兼容性坑
真正卡住人的往往不是“怎么写”，而是这些隐性条件没满足：
- 旧版 Safari 在极小尺寸（如
w-6 h-6）下对border-radius: 9999px渲染不稳定，建议加min-w-6 min-h-6 - 某些 UI 库（DaisyUI、Headless UI）在 focus/hover 或暗色模式下注入
ring类，而ring默认带border-radius: 0，会覆盖rounded-full；需检查 DevTools 计算值，必要时用!rounded-full - IE11 不支持
object-fit，若必须兼容，改用background-image+background-size: cover+border-radius: 50%的div方案，但会丢失alt、懒加载和语义化 - 小尺寸头像（如
24px）在高 DPI 屏幕上边缘发虚，优先用偶数像素值，并避免半像素计算
圆不是靠一个属性画出来的，是宽高、裁剪、缩放、渲染四者协同的结果。漏掉任意一环，视觉上就“破圆”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
