头像加 rounded-full 仍是方的，因该类仅设 border-radius:9999px，不改变图片原始尺寸与裁剪；必须配合等宽高（如 w-12 h-12）、overflow-hidden 和 object-cover 才能呈现完整圆形效果。
为什么只加 rounded-full 头像还是方的
因为 rounded-full 只设置 border-radius: 9999px，它不改变图片本身的形状。如果图片宽高不等、没设固定尺寸、或父容器没约束边界，浏览器渲染时仍按原始盒模型裁剪——圆角只是“外边框”变圆，内容照常溢出。
常见现象：头像图片拉伸变形、边缘有直角白边、hover 时突然出现圆角但初始态仍是方的。
- 必须搭配明确的宽高类，如
w-10 h-10、w-12 h-12，且二者值相等 -
rounded-full对img元素本身生效，但若图片自然尺寸远大于容器，会被拉伸或留白 - 没有
overflow-hidden时，图片超出部分不会被裁掉，圆角视觉上“不存在”
overflow-hidden 必须和 rounded-full 同级作用于容器
很多人把 overflow-hidden 加在父 div 上，而 rounded-full 加在 img 上，结果无效——圆角是容器的属性，裁剪也得由同一层容器执行。
正确结构是两者都加在同一个元素上，通常是 img 标签本身：
立即学习“前端免费学习笔记（深入）”；
<img src="avatar.jpg" class="w-12 h-12 rounded-full overflow-hidden object-cover">
-
object-cover不可省：防止图片压缩变形，确保填满且居中裁切 - 不要用
object-contain或默认行为，它们会留白，破坏圆形效果 - 若头像来自 API 且尺寸不可控，建议服务端统一返回正方形图，或前端用
aspect-square（Tailwind v3.2+）兜底
响应式圆形头像容易漏掉的同步点
写 sm:w-14 sm:h-14 sm:rounded-full 时，sm:overflow-hidden 很可能被忽略。一旦断点下宽高放大但裁剪失效，头像立刻“破圆”。
- 所有与尺寸/圆角相关的响应式类，必须和
overflow-hidden成对出现 - 推荐写法：
sm:w-14 sm:h-14 sm:rounded-full sm:overflow-hidden - 慎用
md:rounded-full单独修饰：如果md:w-10 md:h-10没同步加，宽高不等 → 椭圆 - 旧版 Safari 在小尺寸（如
w-6 h-6）下对9999px渲染不稳定，可降级为rounded-full+min-w-6 min-h-6防止收缩
暗色模式或组件库覆盖时的圆角消失问题
某些 UI 库（如 Headless UI、DaisyUI）或自定义主题会在 hover、focus 或暗色模式下注入 ring 类，而 ring 默认带 border-radius: 0，直接覆盖 rounded-full。
- 检查 DevTools 中最终计算的
border-radius值，确认是否被其他类重置 - 优先用
!rounded-full强制覆盖（仅限必要场景，避免滥用） - 更稳妥的方式：把
rounded-full和overflow-hidden提到最外层包装元素，并禁止子元素添加干扰类 - 如果用
aspect-square（如aspect-square w-12），再配rounded-full，比纯w/h更抗干扰
真正难的不是加几个类，而是理解 rounded-full 本质是“暴力撑满”，它依赖容器尺寸稳定、内容可控、裁剪边界明确。任何一环松动，圆就散了。
