在css中使用 :focus-visible 伪类可以解决按钮点击时出现黑边框的问题，具体做法是为按钮设置 outline: none 并配合 :focus-visible 定义自定义焦点样式。这样做会在用户通过键盘导航时显示清晰的焦点指示，而在鼠标点击时隐藏默认轮廓，从而消除恼人的黑边框。需要注意的是，:focus-visible 仅在浏览器支持且焦点由非指针设备（如键盘）触发时才生效，若需完全移除所有焦点样式，应谨慎使用以确保无障碍访问性。
如何为按钮应用:focus-visible以移除默认黑框
要移除按钮点击时的黑边框，需要覆盖默认的 outline 属性，但仅针对 :focus-visible 状态进行定制。首先，将按钮的通用 :focus 样式设为 outline: none，然后使用 :focus-visible 添加一个更美观的焦点环，例如使用 box-shadow 或自定义 outline。这样，当用户用 Tab 键聚焦按钮时，会看到自定义的高亮效果；而用鼠标点击时，则不会显示任何轮廓，避免了黑框的出现。此方法确保了键盘用户的可访问性，同时提升了视觉体验。
button {
border: 2px solid #007bff;
background-color: #fff;
color: #007bff;
padding: 8px 16px;
cursor: pointer;
}
button:focus {
outline: none;
}
button:focus-visible {
outline: 2px solid #0056b3;
outline-offset: 2px;
}预期结果：当按钮被鼠标点击时，无黑边框；当通过 Tab 键聚焦时，显示蓝色外框。
立即学习“前端免费学习笔记（深入）”；
:focus-visible与:focus在行为上的区别是什么
:focus-visible 与 :focus 的主要区别在于触发条件：:focus 在任何焦点获取时（包括鼠标点击和键盘导航）都生效，而 :focus-visible 仅在浏览器判断焦点应由可见指示器表示时才生效，通常用于键盘导航。这意味着 :focus-visible 能智能地避免在鼠标交互时显示焦点样式，从而解决黑边框问题，而 :focus 则可能始终显示轮廓。开发者应优先使用 :focus-visible 来平衡无障碍性和视觉设计，因为它更符合现代浏览器的最佳实践。
/* 对比示例：使用:focus */
button:focus {
outline: 2px solid red; /* 鼠标点击也会显示红框 */
}
/* 使用:focus-visible */
button:focus-visible {
outline: 2px solid blue; /* 仅键盘导航时显示蓝框 */
}预期结果：在 :focus 示例中，鼠标点击按钮会显示红色轮廓；在 :focus-visible 示例中，只有键盘聚焦时显示蓝色轮廓，鼠标点击无轮廓。
当按钮没有键盘交互时:focus-visible会如何表现
当按钮没有键盘交互（即仅通过鼠标点击）时，:focus-visible 伪类不会匹配任何状态，因此其定义的样式（如自定义轮廓）不会被应用。此时，按钮仅处于 :focus 状态，但由于我们已设置 outline: none，所以不会显示任何焦点指示器，从而避免了黑边框。这种行为确保了在非键盘场景下界面保持简洁，同时保留了键盘用户的可访问性。开发者应测试不同输入方式以验证此行为是否符合预期。
