:focus 在元素获得焦点时始终触发，无论是通过鼠标点击还是键盘导航。而 :focus-visible 仅在浏览器判断用户确实需要视觉焦点指示时才触发（通常是通过键盘 Tab 键导航时）。

使用 :focus-visible 可以避免鼠标点击按钮或链接时出现不美观的焦点环，同时保留键盘用户所需的可访问性。这是现代 Web 开发中推荐的最佳实践。

浏览器默认的焦点指示器存在几个问题：

• 样式不一致：不同浏览器（Chrome、Firefox、Safari）的默认焦点环外观各不相同。
• 与设计不协调：默认的蓝色或黑色虚线框可能与您的品牌色和设计风格冲突。
• 对比度不足：在某些背景下，默认焦点环可能不够明显，影响可访问性。
• 不支持圆角：某些浏览器的 outline 不跟随 border-radius，在圆角元素上显得突兀。

自定义焦点指示器让您能创建与品牌一致、对比度充足、且在所有浏览器中表现统一的焦点样式。

WCAG 2.1 中有两个相关标准：

• 2.4.7 焦点可见（级别 AA）：任何可键盘操作的用户界面组件都必须有可见的焦点指示器。
• 2.4.11 焦点外观（级别 AAA）：焦点指示器的对比度至少为 3:1，且焦点环至少 2px 宽。

即使不追求 AAA 级别，也建议确保焦点指示器与背景有足够的对比度，这对视力受限的用户至关重要。

Outline 的优势：简单可靠，所有浏览器都支持，不影响元素尺寸和布局。

Box-shadow 的优势：

• 完美跟随 border-radius，在圆角元素上更美观
• 可以设置模糊和扩散，实现柔和的光晕效果
• 支持多层阴影，创造更丰富的视觉效果
• 不占用盒模型空间

推荐做法：使用 box-shadow 替代 outline（设置 outline: none;），以获得更好的视觉控制。但务必确保对比度足够。

测试方法：

1. 使用 Tab 键在页面元素间导航，观察焦点环是否清晰可见。
2. 使用 Shift + Tab 反向导航。
3. 检查所有可交互元素（按钮、链接、输入框、选择器、自定义控件等）是否都有焦点样式。
4. 在不同背景色上测试焦点指示器的对比度。
5. 使用浏览器的开发者工具模拟不同的视力条件。

注意：:focus-visible 仅在键盘导航时触发，鼠标点击通常不会显示该样式。

不推荐。使用 outline: none; 或 :focus { outline: 0; } 完全移除焦点指示器会严重损害网站的可访问性。依赖键盘导航的用户（包括视障用户、运动障碍用户）将无法判断当前聚焦在哪个元素上。

如果您确实需要移除默认样式，必须同时提供替代的视觉焦点指示（如 box-shadow、背景色变化、边框变化等），确保焦点状态依然可见。这也是本工具存在的意义——帮助您创建美观且无障碍的焦点样式。