根本原因是rounded-full仅设border-radius:9999px，不裁剪内容也不控制缩放；真正生效需同时满足等宽高（如w-12 h-12）、rounded-full、overflow-hidden和object-cover四者协同，缺一不可。
为什么只加 rounded-full 头像还是方的
根本原因不是类没生效，而是 rounded-full 只设置 border-radius: 9999px，它不裁剪内容、也不控制图片缩放。常见现象包括：图片边缘有直角、hover 才突然变圆、头像拉伸或上下留白。
真正起作用的是三个条件必须同时满足：
-
w-12 h-12（或任意相等宽高）——强制正方形盒模型 -
rounded-full——提供足够大的圆角半径 -
overflow-hidden+object-cover——前者裁掉溢出部分让圆角“可见”，后者防止拉伸变形或留白
漏掉任一，圆形就不可靠。尤其注意：overflow-hidden 必须和 rounded-full 在同一元素上，不能只加在父容器。
border-radius: 50% 和 rounded-full 有什么区别
两者视觉效果一致，但实现原理和适用场景不同：
-
border-radius: 50%是标准 CSS，按宽高一半计算半径，依赖元素是否为正方形；非正方形时会变成椭圆 -
rounded-full是 Tailwind 的工具类，对应border-radius: 9999px，数值极大，只要宽高相等就稳出圆，对小尺寸更鲁棒 - 旧版 Safari 在极小尺寸（如
w-6 h-6）下对9999px渲染不稳定，此时建议用border-radius: 50%或加min-w-6 min-h-6
如果你手写 CSS，border-radius: 50% 更语义清晰；用 Tailwind 时，rounded-full 更简洁，但别忘了配套的裁剪与缩放控制。
响应式断点下圆角失效怎么办
写 md:w-16 md:h-16 md:rounded-full 时，很容易漏掉 md:overflow-hidden 和 md:object-cover，结果大屏下头像立刻变方。
关键原则是：所有影响形状的类必须成对出现
- 尺寸类（
w-/h-）→ 必须等宽等高 - 圆角类（
rounded-full）→ 必须配overflow-hidden - 图片行为类（
object-cover）→ 必须随尺寸类一起响应式切换
例如正确写法：sm:w-10 sm:h-10 sm:rounded-full sm:overflow-hidden sm:object-cover。不要只改尺寸，不更新裁剪逻辑。
无法修改 HTML 时怎么补救
当只能改 CSS（比如 CMS 模板、第三方组件封装），没法给 <img> 加类，可用背景图方式绕过限制：
- 把图片设为容器背景：
background-image: url(...) - 容器必须是正方形：
width: 80px; height: 80px; - 加上：
border-radius: 50%; background-size: cover; background-position: center;
这种方式不依赖 object-fit，兼容性更好，也天然规避了 overflow-hidden 层级错位问题。但缺点是无法设置 alt 文本，SEO 和可访问性略弱。
真正卡住人的从来不是“怎么加类”，而是误以为 rounded-full 是个独立功能——它只是组合技里的一环，overflow-hidden 和 object-cover 不是锦上添花，是让圆角真正落地的必要条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
