黑色虚线框是浏览器默认的:focus outline，用于键盘聚焦的可访问性提示；鼠标点击也会触发，故需用:focus-visible精准控制：仅键盘聚焦时显示轮廓，兼顾可访问性与体验。
点击按钮后出现黑色虚线框是什么
这是浏览器默认的 outline 样式，用于键盘聚焦（比如 Tab 切换到按钮时）的可访问性提示。但鼠标点击也会触发 :focus 状态，导致黑框意外出现。
用 CSS 移除 outline 的正确写法
直接设 outline: none 虽然能去掉黑框，但会破坏键盘用户的操作可见性，不推荐无差别使用。更稳妥的做法是「仅在非键盘聚焦时移除」：
button:focus {
outline: none;
}
button:focus:not(:focus-visible) {
outline: none;
}
或者更现代、兼容性更好的写法（Chrome/Firefox/Edge 100+ 支持）：
button:focus {
outline: none;
}
button:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
}
-
:focus-visible只在用户通过键盘聚焦时生效，鼠标点击不会触发 - 保留
outline对可访问性至关重要，WCAG 明确要求焦点指示必须清晰可见 - 不要对所有
*:focus统一设outline: none，否则 Tab 用户将无法感知当前焦点位置
为什么 outline: 0 不推荐
outline: 0 是旧写法，语义弱于 outline: none，且部分浏览器（如旧版 Safari）可能不完全识别。更重要的是，它和 outline: none 一样，会无差别抹除所有焦点轮廓，不管触发方式。
立即学习“前端免费学习笔记（深入）”；
-
outline: 0≠outline: none：前者可能被解析为outline-width: 0，而outline-style仍为solid，某些渲染引擎下仍有微弱表现 - 若真要用
none，请确保同时提供替代焦点样式（如box-shadow或背景色变化） - React/Vue 项目中，组件库按钮常自带
outline重置逻辑，覆盖时要注意层叠顺序
移动端点击黑框（iOS Safari 特殊情况）
iOS Safari 在点击按钮时会显示灰色半透明高亮 overlay，这不是 outline，而是 -webkit-tap-highlight-color。它和 :focus 无关，需单独处理：
button {
-webkit-tap-highlight-color: transparent;
}
- 该属性只影响触摸反馈，不影响键盘焦点
- 设为
transparent最安全；设为rgba(0,0,0,0)在某些 iOS 版本下可能失效 - 注意：移除 tap highlight 后，用户可能失去点击确认感，建议配合
:active样式增强反馈（如缩放或背景变暗）
真正麻烦的不是怎么去掉黑框，而是去掉之后怎么让键盘用户依然清楚自己聚焦在哪——这个细节，90% 的项目上线前都没测过。
