ring类需与ring-offset配对使用才能美观，单独使用ring-2常比border更丑；必须用focus:outline-none避免ring与outline叠加，且ring圆角需显式声明。
直接用 ring 类不能“更好看”，它只是更灵活——关键在怎么配对、偏移和收放。单独加 ring-2 往往比 border 还丑，因为默认会压边框、裁圆角、颜色不匹配。
ring 压住 border 怎么办？必须配 ring-offset
ring 是绝对定位伪元素，不参与盒模型，所以它会叠在 border 上，不是 bug，是设计如此。常见表现：聚焦时输入框边缘变厚、圆角被切断、图标按钮显得拥挤。
- 必须成对使用：
ring-offset-{width}+ring-{color}，单写ring-offset-2无效 - 宽度建议匹配 border：有
border-2就用ring-offset-2，让 ring 起点对齐 border 外缘 - 别用
ring-offset-0“重置”，它会让 ring 紧贴内容边缘，问题更明显 -
ring-offset颜色必须和宿主背景一致，否则交界处漏白边或灰边；深色模式下优先用dark:ring-offset-gray-900或ring-offset-current
focus 状态下 ring 和 outline 叠在一起？先关 outline
浏览器默认的 outline 不会自动消失，和 ring 叠加后视觉混乱，还影响可访问性。
- 必须显式加
outline-none，且带状态前缀：focus:outline-none - 漏写
focus:前缀是高频失效原因——ring-2本身不生效，得是focus:ring-2 - 如果用了
ring-inset，要确认是否真需要内缩效果；它默认无颜色，必须搭配ring-gray-300等显式色类 - 颜色太浅（如
ring-gray-300）在白底上几乎不可见，推荐ring-blue-500或ring-indigo-400
圆角容器上 ring 不圆？要同步加 rounded 到 ring 类
ring 伪元素默认是直角，不会自动继承宿主的 rounded-lg 或 rounded-full。哪怕按钮写了 rounded-full，ring 还是方的。
- 必须显式给 ring 加圆角：
focus:rounded-full focus:ring-2 focus:ring-blue-500 -
rounded-full只在宽高等比时才出正圆，比如h-10 w-10；若容器尺寸不固定，ring 圆角也会失真 - 用
aspect-square包裹内容再加rounded-full更稳，尤其适合头像、图标按钮等动态场景 - 避免在 flex 子项里只靠
rounded-full，内容拉伸会破坏圆角，需配合flex-shrink-0或object-cover
真正难的不是写对 class，而是判断 ring 应该外扩还是内缩、要不要保留 border、以及 offset 颜色在明暗模式下是否同步更新——这些没法靠工具类推导，得盯着真实交互场景调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
