浏览器默认的:focus轮廓是可访问性设计的一部分，用于键盘导航时标示聚焦元素；直接设outline:none会损害可访问性，正确做法是用:focus-visible提供替代视觉反馈或统一优化outline样式。

button:focus 时出现的黑色边框是什么

那是浏览器默认的 :focus 轮廓（outline），属于可访问性设计的一部分，用于键盘导航时标示当前聚焦元素。它不是 border，不能靠 border: none 去掉；直接设 outline: none 虽能消除，但会损害可访问性。

安全清除 focus outline 的正确方式

推荐用 outline: 0 或 outline: none，但必须同时提供替代视觉反馈，否则键盘用户将无法判断焦点位置：

• 仅在鼠标操作后移除 outline：用 :focus:not(:focus-visible) 配合 outline: none
• 或统一改用更友好的 outline 样式，比如 outline: 2px solid #007bff + outline-offset: 2px
• 若确定不需要键盘导航（极少数场景），才用 button:focus { outline: none; }，且需配合 tabindex="-1" 移除键盘可聚焦能力

Chrome/Firefox 中 :focus-visible 的兼容性注意点

:focus-visible 是区分鼠标/键盘触发 focus 的关键伪类，但旧版浏览器不支持：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• Firefox 从 84+ 支持，Chrome 从 86+ 支持
• Safari 目前仍不支持（截至 Safari 17.5）
• 可用 focus-visible polyfill 补齐，但需注意它会注入 data-focus-visible-added 属性而非原生伪类
• 实际写法建议：先写 button:focus { outline: none; }，再用 @supports (selector(:focus-visible)) 块覆盖为 button:focus-visible 样式

别漏掉其他元素的 focus outline 问题

不只是 <button>，<a>、<input>、<textarea> 默认都有 focus outline：

立即学习“前端免费学习笔记（深入）”；

• 全局重置风险高，不建议写 *:focus { outline: none; }
• 应按组件粒度处理，例如 button.btn-primary:focus { outline: 2px solid #0d6efd; outline-offset: 2px; }
• 某些 UI 库（如 Bootstrap）已内置 focus-ring 类，优先复用其逻辑而非暴力清空

真正麻烦的不是怎么去掉边框，而是去掉之后——谁还能看出来哪个按钮正被键盘 tab 到。这个细节一旦忽略，就不是样式问题，而是合规问题。