不能直接用 outline 做可访问焦点样式，因为其样式难控制、macOS Safari 默认禁用、不支持 :focus-visible 精细判断，且无法满足设计稿中 2px 实色+4px 偏移+6px 圆角等定制需求。
为什么不能直接用 outline 做可访问焦点样式
因为 outline 是浏览器强干预的默认行为，位置、粗细、圆角、颜色都难控制，且在 macOS Safari 中会自动被系统禁用（除非用户开启“按下 Tab 键时显示键盘焦点环”），导致键盘导航时完全不可见。更麻烦的是，它无法响应 :focus-visible 的精细判断，容易在鼠标点击后也误触发。
- 真实场景中，你点按钮后不希望出现那个难看的双层虚线环
- 设计稿要求焦点环是 2px 实色 + 4px 偏移 + 6px 圆角，
outline根本做不到 - 某些组件（如自定义
select或combobox）需要焦点样式跟随容器形状，outline只能套矩形框
ring 类如何替代 outline 实现可控焦点环
Tailwind 的 ring 工具本质是用 box-shadow 模拟焦点环，好处是完全 CSS 可控，还能和 :focus-visible 安全配合。关键不是加 ring 就完事，而是要关掉原生 outline 并正确组合。
- 必须显式写
outline-none，否则ring和outline会叠加出奇怪效果 - 推荐组合：
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 -
ring-offset-是“内边距偏移”，用于避免环贴着元素边缘；若父容器没设ring-offset-color，它会透明，环就看起来像贴边——这是最常被忽略的一环 - 深色模式下记得加
dark:focus:ring-blue-400，否则蓝环在暗底上可能对比度不足
为什么 ring 在按钮/输入框/自定义组件里表现不一致
因为 ring 依赖 box-shadow 渲染，而不同元素默认 border-radius、padding、甚至 transform 都会影响阴影实际落点。比如一个 rounded-full 按钮和一个 rounded-none 输入框，同样 ring-2 看起来粗细和圆润度完全不同。
- 按钮常用：
focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg - 输入框建议加
focus:ring-inset，让环向内收缩，避免撑大容器高度 - 带图标按钮（如
icon-button）如果用了scale-105动画，ring也会被缩放——得用transform: scale()配合will-change: transform才稳定 - 绝对定位弹出层（如
Popover）里，ring可能被overflow-hidden截断，此时得给父容器加ring-offset-4扩大预留空间
性能与可访问性陷阱：别让 ring 拖慢键盘导航
高频重绘的 box-shadow 在低端设备上可能导致 :focus-visible 切换卡顿，尤其当页面有大量可聚焦元素时。这不是 Tailwind 的问题，而是 CSS 渲染机制决定的。
立即学习“前端免费学习笔记（深入）”；
- 避免对整个列表项（
li）加focus:ring，改用只作用于内部操作按钮 - 不要在
transition-all上无差别加focus动画，应限定为transition-[box-shadow] - Chrome 120+ 支持
focus-visible的新语法：focus:ring focus-visible:ring-blue-500 focus-visible:ring-offset-2，这样鼠标点击时不触发 ring，只保留键盘导航可见性 - 测试时务必关掉鼠标，纯用 Tab 导航走一遍流程——很多团队只测了鼠标 hover，忘了键盘用户根本看不到 hover 效果
真正难的不是写对那几行 class，而是想清楚哪个交互节点该有焦点反馈、环该停在哪一层级、以及当用户缩放字体到 200% 时，ring 还能不能清晰识别。这些细节不会报错，但会悄悄把人挡在产品外面。
