rounded-full 是 Tailwind 中将 border-radius 设为 9999px 的预设类，仅在宽高等比例时呈现正圆，需配合固定宽高使用，非 50% 或 100%，不保证所有场景下为真圆。
rounded-full 是什么，不是什么
rounded-full 是 Tailwind 提供的一个预设类名，它把元素的 border-radius 设为 9999px（不是 50%，也不是 100%），本质是“足够大以撑满宽高”的一种 hack。它只在宽高等比例时才真圆——比如 h-10 w-10 可以出圆，但 h-10 w-20 会变成横向椭圆。
常见错误现象：rounded-full 加在图片或按钮上却没看到圆，大概率是容器没设固定宽高，或者内容拉伸了盒模型（比如图片没加 object-cover 或 flex-shrink-0）。
- 必须配合明确的宽高使用，否则无效（如
rounded-full+h-8+w-8） - 对响应式元素慎用：用
sm:rounded-full前先确认sm:h-10 sm:w-10是否同步生效 - 和
aspect-square搭配更稳，尤其用于动态内容（如用户头像）
为什么不用 rounded-lg 或自定义 radius
想做“圆形”就别用 rounded-lg（对应 0.5rem），它只控制弧度大小，不保证闭合成圆；也不建议手写 style="border-radius: 50%"，因为百分比半径依赖盒模型尺寸计算，在 flex 或 grid 子项中容易失效（尤其当内容溢出或未设宽高时）。
rounded-full 的优势在于它绕过了百分比计算逻辑，靠极大值强制“视觉上闭合”。但它也有代价：
- 在极窄容器（如
w-1）里，9999px可能被浏览器截断，表现不如预期 - 和
overflow-hidden同时用时，注意子元素是否被意外裁切（比如文字超出） - 某些旧版 Safari 对超大
border-radius渲染有微小锯齿，50%更平滑但更难控制
实际项目中最常踩的三个坑
边框圆角看似简单，但在真实 UI 中容易因组合规则翻车：
- 图片加
rounded-full但边缘模糊：缺了object-fit: cover，改用class="rounded-full object-cover" - 按钮用了
rounded-full却左右不对称：检查是否漏了px或py，文字垂直居中依赖行高，h-10不等于leading-10 - 暗色模式下圆角变方：确认
rounded-full类没被条件 class 覆盖（比如某些组件库的ring类会重置border-radius）
替代方案：什么时候该放弃 rounded-full
当你要的是“正圆”且尺寸不确定（比如适配不同屏幕的头像组件），rounded-full 就不够用了。这时得回到 CSS 本身：
用 aspect-square + rounded-full 组合最省事：
<div class="w-16 aspect-square rounded-full overflow-hidden">@@##@@</div>
如果要支持动画（比如 hover 从圆角变全圆），rounded-full 无法过渡（CSS 不支持 border-radius: 9999px → 50% 的渐变），得用 border-radius: 50% 配合 transition。
复杂点往往不在“怎么写”，而在“谁在覆盖你写的”。查不到圆角？先开 DevTools 看 computed border-radius，再往上逐层看 class 和 !important。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
