必须同时设置相等宽高、rounded-full、overflow-hidden和object-cover，缺一不可；仅border-radius: 50%只改边框弧度，不裁剪内容也不控制缩放，故头像仍为方、拉伸或带白边。
直接给 <img> 加 border-radius: 50% 不会自动变圆——宽高不等、没裁剪、没缩放控制，头像照样是方的、拉伸的或带白边的。
为什么只写 border-radius: 50% 头像还是方的
因为 border-radius: 50% 只改容器“边框弧度”，不碰内容。它不裁掉溢出部分，也不约束图片怎么缩放。常见现象包括：
- 图片上下/左右留白，圆角被白边“撑开”
- hover 时突然变圆（其实是 overflow-hidden 或 object-fit 在那一刻才生效）
- 父容器写了
rounded-full，但overflow-hidden漏加在子元素上，裁剪失效 - 响应式断点里写了
md:w-16 md:h-16，却忘了配md:overflow-hidden，大屏一放大立刻破圆
img 标签上必须同时写的四个关键样式
要让一个 <img> 稳定显示为圆形头像，这四点缺一不可，且都得写在同一个 <img> 元素上：
-
w-12 h-12（或任意相等值）：强制正方形盒模型，不能只靠图片原始尺寸撑开 -
rounded-full（等价于border-radius: 9999px）：提供足够大的圆角半径 -
overflow-hidden：裁掉超出正方形区域的内容，让圆角真正“可见” -
object-cover：等比缩放并裁剪图片，避免拉伸变形或留白
完整示例：
<img src="avatar.jpg" class="w-12 h-12 rounded-full overflow-hidden object-cover">
立即学习“前端免费学习笔记（深入）”；
老浏览器或邮件模板里怎么降级
IE11、旧版 Outlook、微信内置 WebView（iOS 15.4 以下）基本不支持 object-fit 和 clip-path，强行用会显示毛边矩形图。稳妥做法是绕过 <img> 标签：
- 用
<div>当容器，设width/height相等 +border-radius: 50%+overflow: hidden - 把头像设为该
<div>的background-image，配合background-size: cover和background-position: center - 内联样式必须写死
width/height，禁用rem或百分比（邮件客户端解析不可靠）
示例：
<div class="avatar" style="width:80px;height:80px;border-radius:50%;overflow:hidden;background:url(avatar.jpg) center/cover no-repeat;"></div>
容易被忽略的细节：动画、阴影和响应式
加 hover 缩放或 transition 时，部分浏览器会在动画中间帧临时关闭圆角渲染，导致“闪方”。真实项目中常踩的坑有：
- 对
border-radius做transition—— 改用transform: scale()更稳定 - 同时用
box-shadow和border-radius—— 老 Safari 渲染边缘发虚，可用outline替代边框，或用伪元素实现阴影 - 暗色模式下 UI 库注入的
ring类自带border-radius: 0，直接覆盖rounded-full，需检查 DevTools 中最终计算值 - 用
aspect-ratio: 1 / 1替代固定宽高更响应式，但 Safari 15.4+ 才完全支持，上线前务必验证
最常失效的不是圆角本身，而是宽高控制、裁剪、缩放三者没对齐。border-radius: 50% 是最后一笔描边，前面任何一环松动，圆就只是个错觉。
