必须覆盖所有焦点伪类状态才能彻底禁用按钮黑框，因为Bootstrap等框架为:focus、:active:focus、.btn:focus等单独定义了outline，仅button{outline:none}无法生效。
直接加 outline: none 不够，必须覆盖所有触发焦点的伪类状态，否则点击弹起后边框还会闪一下。
为什么只写 button { outline: none } 不行
Bootstrap（尤其是 v4/v5）和部分浏览器会为多个焦点状态单独定义 outline，比如 :focus、:active:focus、.btn:focus、.btn.active:focus 等。只重置基础 button 选择器，这些更具体的选择器仍会生效，优先级更高。
常见错误现象：点击按钮时黑框消失，但松开鼠标瞬间又闪出一圈黑色边框。
-
.btn:focus和.btn.active:focus在 Bootstrap 的 CSS 文件里明确定义了outline - 移动端 Safari 和 Chrome 还可能对
:active状态额外渲染 - 某些版本 Bootstrap 使用
-webkit-focus-ring-color，需显式设为none或透明
必须同时覆盖的 CSS 选择器
把下面这段样式加到你项目 CSS 的末尾（或 <style> 标签内），确保它不被其他规则覆盖：
立即学习“前端免费学习笔记（深入）”；
button,
.btn:focus,
.btn.focus,
.btn:active:focus,
.btn.active:focus,
.btn.active.focus,
.btn:active.focus {
outline: none !important;
outline-offset: -2px; /* 避免部分浏览器残留偏移 */
}说明：
- 单独写
button是为了兜底原生按钮（非 Bootstrap 类） - 列出所有 Bootstrap 官方用到的焦点类组合，避免漏掉某一个
- 加
!important是因为 Bootstrap 的 CSS 通常打包压缩，选择器权重高 -
outline-offset清零可防止某些浏览器在移除outline后仍保留视觉残留
移动端额外要注意的点
iOS Safari 和 Android Chrome 在触摸点击时会默认加一层“高亮”效果，这和 outline 无关，但视觉上也像黑框：
- 给按钮加
-webkit-tap-highlight-color: transparent消除点击瞬时高亮 - 如果按钮用了
border-radius，还要确认没意外触发appearance: button的默认渲染（尤其在旧版 Safari） - 微信小程序里，
button的边框可能来自::after伪元素，得单独写button::after { border: none }
别忽略的兼容性细节
有些场景下 outline: none 会让键盘用户无法看到焦点位置，影响可访问性：
- 如果项目需要 WCAG 合规，不要全局禁用
outline，改用自定义焦点样式（如box-shadow: 0 0 0 2px #007bff） - 仅对鼠标/触摸操作隐藏，可用
@media (hover: hover)区分设备类型 - Bootstrap 5.3+ 开始提供
.btn-focus-shadow-none工具类，但默认未启用，需手动引入
真正容易被忽略的是：这个黑框不是 bug，是浏览器对可聚焦元素的默认反馈机制。删它之前，先确认你的替代焦点样式是否已就位。
