rounded-full 本身不使头像变圆，需配合等宽高、overflow-hidden 和 object-cover 才生效；仅加 rounded-full 会导致拉伸、留白或hover才变圆，因它只设圆角不裁剪内容。
rounded-full 本身不会让头像变圆，它只设 border-radius: 9999px；真正起作用的是「等宽高 + overflow-hidden + object-cover」三者配合。
为什么只加 rounded-full 头像还是方的
常见现象：图片边缘有直角、hover 才突然变圆、头像拉伸或留白。根本原因不是类没生效，而是 rounded-full 只改外边框弧度，不控制内容裁剪和缩放。
- 图片原始尺寸 ≠ 容器尺寸时，浏览器按默认
object-fit: fill拉伸填充，破坏圆形结构 - 没加
overflow-hidden，超出部分照常显示，圆角视觉上“被盖住” - 把
rounded-full加在img上，overflow-hidden加在父div上——两者不在同一层，裁剪和圆角不协同 - 响应式断点（如
sm:w-14）下漏掉sm:overflow-hidden，小屏圆、大屏方
img 标签上必须同时写的三个类
最简可靠写法是全部加在 <img> 标签自身，不依赖父容器定位或额外 wrapper：
-
w-12 h-12（或任意相等值，如w-10 h-10）：强制正方形盒模型 -
rounded-full：提供足够大的圆角半径 -
overflow-hidden：裁掉超出部分，让圆角真正“可见” - 必须加
object-cover：否则图片会拉伸变形或上下/左右留白，破坏圆形边界
完整示例：<img src="avatar.jpg" class="w-12 h-12 rounded-full overflow-hidden object-cover">
响应式与暗色模式下的失效点
这些场景下容易只改尺寸或圆角，却忘了同步裁剪和覆盖逻辑：
- 写
md:w-16 md:h-16 md:rounded-full时，md:overflow-hidden必须成对出现，否则断点放大后立刻破圆 - 某些 UI 库（如 DaisyUI、Headless UI）在 focus/hover 或暗色模式下注入
ring类，而ring默认带border-radius: 0，直接覆盖rounded-full - 检查 DevTools 中最终计算的
border-radius值，确认是否被其他 class 重置；必要时用!rounded-full强制，但仅限兜底 - 旧版 Safari 在极小尺寸（如
w-6 h-6）下对9999px渲染不稳定，可加min-w-6 min-h-6防收缩
真正卡住人的从来不是“怎么加类”，而是忘记 overflow-hidden 和 object-cover 是 rounded-full 能生效的前提——它们不是可选项，是组合技的固定部件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
