要使 focus:ring-2 正常生效，须配合 focus:outline-none（或 focus-visible:outline-none）、ring-offset-（宽度/颜色匹配 border）、focus:rounded-（同步圆角）及高对比度 ring 颜色（如 ring-blue-500/dark:focus:ring-blue-400）。
直接加 focus:ring-2 是看不到效果的，必须配合几个关键类才能让聚焦外环正常显示、不重叠、不发虚、明暗模式都可用。
必须关闭原生 outline
浏览器默认的焦点 outline 不会自动消失，和 ring 叠在一起会变双环、错位、干扰可访问性。
- 一定要写
focus:outline-none，不能漏掉focus:前缀 - 如果用键盘导航更严谨，优先改用
focus-visible:outline-none focus-visible:ring-2 - 旧版 Safari 不支持
focus-visible，可回退到focus:，但别混用两者
必须配对 ring-offset
ring 是伪元素，不占盒模型空间，它默认从元素边缘开始画，会压住 border 或贴着内容，看起来像没生效。
- 宽度要匹配：有
border-2就配ring-offset-2，让 ring 起点对齐 border 外缘 - 颜色要一致：用
ring-offset-white dark:ring-offset-gray-900，避免交界处漏白边或灰边 - 别用
ring-offset-0“重置”，它会让 ring 紧贴内容，问题更明显
圆角容器要显式加 rounded
ring 默认是直角，不会继承父元素的 rounded-lg 或 rounded-full。
立即学习“前端免费学习笔记（深入）”；
- 按钮写了
rounded-full，ring 还是方的——得同步加focus:rounded-full - 头像或图标按钮推荐
aspect-square rounded-full，尺寸稳定，圆角才准 - 输入框用
rounded-full时，左侧图标容器也要加相同圆角，否则两端露馅
颜色与深色模式适配
浅色 ring（如 ring-gray-300）在白底上几乎看不见，深色模式下更难辨识。
- 推荐用有足够对比度的颜色：
ring-blue-500、ring-indigo-400 - 深色模式下加
dark:focus:ring-blue-400，确保 WCAG AA 合规 - 如果用了
ring-inset，记得搭配显式颜色类，比如ring-inset ring-blue-500
