只加 outline: none 仍有虚线框是因为 Bootstrap 还用 box-shadow 实现焦点样式，且不同状态（如 .btn:focus、.btn:active:focus）需一并重置，并加 !important 才能覆盖高权重原生规则。
为什么只加 outline: none 还有虚线框？
因为 Bootstrap 的焦点样式不止靠 outline，还叠加了 box-shadow（尤其是 focus 和 :active 状态），而且不同版本（v4/v5）选择器权重和默认值不同。只写 button:focus { outline: none } 很可能被 Bootstrap 原生规则覆盖，或者漏掉 .btn:active:focus 这类复合状态。
.btn:focus、.btn:active:focus、.btn.active:focus 都要覆盖
Bootstrap 默认用多个选择器组合控制焦点外观，常见需重置的包括：
-
.btn:focus：键盘 tab 进入或鼠标点击后获得焦点 -
.btn:active:focus：按住不放时的状态（尤其移动端易触发） -
.btn.active:focus：带activeclass 的按钮（如下拉菜单 toggle 按钮） -
.btn.focus和.btn:active.focus：v4 中保留的旧式 focus 类（兼容性写法）
推荐一次性覆盖：
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none !important;
box-shadow: none !important;
}
别忘了 <button></button> 元素本身和 .navbar-toggler
有些按钮没加 .btn 类（比如裸 <button></button> 或 .navbar-toggler），它们走的是浏览器原生 focus 样式，Bootstrap 不会接管。这类元素必须单独处理：
- 全局清空：
button, [type="button"], .navbar-toggler { outline: none; box-shadow: none; } - 为防 Firefox 内边框残留，补上：
::-moz-focus-inner { border: 0; } - 如果用了自定义
a按钮（role="button"），也要加：a:focus { outline: none; }
v5.3+ 中 box-shadow 是焦点主因，outline 反而常被忽略
Bootstrap 5 默认禁用 outline，但用 box-shadow 模拟焦点环（颜色来自 $focus-ring-color）。所以即使你删了 outline，蓝/紫虚线框还在——那其实是 box-shadow。关键点：
- 查开发者工具里真正生效的 rule，看是
outline还是box-shadow在起作用 - v5 推荐直接覆盖
$focus-ring-width和$focus-ring-color变量（Sass 环境下） - 纯 CSS 方案必须带
!important，否则被bootstrap.min.css里高权重选择器压住
最简兜底写法（适用于所有版本）：
button,
.btn,
.navbar-toggler {
outline: none !important;
box-shadow: none !important;
}
::-moz-focus-inner {
border: 0;
}
实际项目中，虚线框反复出现，往往不是漏写了某条规则，而是没加 !important，或没覆盖到 .btn:active:focus 这种“双重伪类”状态——这点最容易被跳过。
