UD5工具箱
:focus-visible 和 :focus 有什么区别？
:focus 伪类在元素获得焦点时始终触发，无论焦点来源是键盘 Tab 导航、鼠标点击还是触摸操作。而 :focus-visible 由浏览器智能判断，仅在浏览器认为需要显示视觉焦点指示时触发——通常是用户使用键盘导航时。这意味着鼠标用户不会看到焦点轮廓，而键盘用户能清晰地看到焦点位置。本工具默认生成 :focus-visible 的样式代码。为什么需要自定义焦点指示器？
浏览器默认的焦点样式存在多个问题：不同浏览器的默认样式不一致（Chrome 为蓝色轮廓，Firefox 为黑色虚线框，Safari 为灰色外框）；默认样式往往与网站整体设计风格不协调；部分默认样式的对比度不足，无法满足 WCAG 无障碍标准；默认 outline 不支持圆角设置。自定义焦点指示器可以确保在所有浏览器中呈现统一、美观且符合无障碍标准的焦点样式。
WCAG 对焦点指示器有什么要求？
WCAG 2.1 定义了两个与焦点指示器相关的要求：2.4.7 焦点可见（AA 级，最低要求）——所有可交互元素必须有可见的焦点指示器，让键盘用户知道当前焦点位置；2.4.11 焦点外观（AAA 级，推荐标准）——焦点指示器的对比度至少达到 3:1（相对于相邻颜色），焦点环宽度至少 2px。本工具的配置选项可以帮助您生成满足这些标准的焦点样式代码。
Box-shadow 和 Outline 哪个更适合做焦点指示器？
两者各有优势：Outline 实现简单可靠，不占据空间，不影响布局，适合快速实现基本焦点指示。但它无法设置圆角，也不支持模糊和扩散效果。Box-shadow 能完美跟随 border-radius 圆角，支持模糊半径和扩散半径配置，可创建多层阴影叠加效果，适合追求精致视觉体验的项目。建议根据项目需求选择：简单场景用 Outline，精致场景用 Box-shadow，也可以两者同时启用以获得最佳效果。
如何在项目中测试焦点指示器的效果？
测试方法包括：首先，使用 Tab 键和 Shift+Tab 键在页面中导航，检查所有可交互元素（按钮、链接、输入框、下拉菜单等）是否都有清晰的焦点指示器。其次，在不同背景色上测试焦点指示器的可见性，确保在浅色和深色背景上都能清晰识别。再次，使用辅助工具如 axe DevTools 或 WAVE 检查焦点指示器是否满足 WCAG 对比度要求。最后，在不同浏览器（Chrome、Firefox、Safari、Edge）中测试一致性。
可以完全移除焦点指示器吗？
不推荐完全移除焦点指示器。如果使用
outline: none 移除焦点指示器而不提供替代方案，键盘用户将无法知道当前焦点位置，这会导致严重的无障碍问题。根据 WCAG 2.4.7 标准，所有可交互元素必须有可见的焦点指示器。如果您不喜欢浏览器默认样式，应该用自定义的焦点样式替换它，而不是简单移除。本工具正是为此目的而设计。本工具生成的代码兼容哪些浏览器？
本工具生成的
:focus-visible CSS 代码在所有现代浏览器中均有良好支持：Chrome 86+、Firefox 85+、Safari 15.4+、Edge 86+。对于不支持 :focus-visible 的旧版浏览器（如 Internet Explorer），焦点样式将回退到浏览器默认行为。如果您需要支持旧版浏览器，建议同时提供 :focus 和 :focus-visible 两种样式作为降级方案。如何将生成的焦点样式应用到整个网站？
要将焦点样式应用到整个网站，建议将生成的 CSS 代码添加到全局样式表中。具体做法：将代码粘贴到主 CSS 文件（如 styles.css 或 global.css）中，确保该文件在所有页面中被引入。如果使用 CSS 框架如 Bootstrap，建议将焦点样式放在框架覆盖样式之后。对于使用 CSS-in-JS 或 Tailwind 的项目，可以将代码添加到全局样式配置或 @layer 指令中。使用默认的
:focus-visible 选择器可以自动应用于所有可聚焦元素。