navbar-toggler点击后黑边框由:focus的outline引起，应通过outline: 2px solid transparent + outline-offset: -2px替代outline: none，同时添加:focus-visible和:active规则确保键盘与触屏体验一致。
Navbar-toggler 点击后黑边框怎么去掉
默认点击 .navbar-toggler 会触发浏览器原生的焦点轮廓（outline），尤其在 Chrome/Firefox 中表现为难看的黑色或蓝色虚线框。这不是 Bootstrap 特有行为，而是 :focus 的默认可访问性样式，但常被误认为“bug”。
真正要改的是 .navbar-toggler:focus 的 outline，不是 border 或 box-shadow。直接设 outline: none 会损害键盘导航可访问性，必须用 outline-offset + outline 替代方案。
- 最安全做法：用
outline: 2px solid transparent+outline-offset: -2px消除视觉突兀感，同时保留焦点状态语义 - 若坚持完全隐藏，至少补上
.navbar-toggler:focus-visible { outline: none; }，让仅键盘用户仍能看见焦点（现代浏览器支持） - 别只写
.navbar-toggler:focus—— Bootstrap 5.3+ 对.navbar-toggler同时定义了:focus和:focus-visible，漏掉后者会导致 Tab 导航时边框重现 - 检查是否引入了第三方 reset.css（如 normalize.css），它可能重置了
outline但没处理focus-visible
移动端点击反馈（tap highlight）怎么禁用
iOS Safari 和部分安卓浏览器点击 .navbar-toggler 时会出现半透明灰色遮罩（tap highlight），和黑边框无关，但常被混淆。这是 WebKit 的 -webkit-tap-highlight-color 控制的。
这个样式不响应 :focus，也不能用 outline 调整，必须单独声明。
- 加
-webkit-tap-highlight-color: transparent;到.navbar-toggler规则里，注意必须带-webkit-前缀 - 不能只写在
:active里——tap highlight 在 touchstart 就触发，:active太晚 - 如果用了
button元素（推荐），确保没额外设appearance: none导致 tap highlight 失效异常 - 部分旧版 Android 浏览器需配合
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }全局重置（慎用，影响所有按钮）
hover/focus 状态颜色不一致怎么办
.navbar-toggler 的 hover 和 focus 颜色由父级 .navbar-light 或 .navbar-dark 决定，但它们只控制初始态。切换主题或动态加载时，:hover 和 :focus 可能不同步变色。
根本原因是 Bootstrap 把 hover/focus 样式写在了 .navbar-light .navbar-toggler 这类组合选择器里，你自定义的单类名规则权重不够。
- 必须用相同特异性覆盖：比如写
.navbar-light .navbar-toggler:hover而不是.navbar-toggler:hover - 颜色值别硬编码——改
--bs-navbar-toggler-border-color和--bs-navbar-toggler-hover-bg（Bootstrap 5.3+ 支持）更可靠 - 检查是否漏了
.navbar-toggler:active：真机长按会触发，此时背景色可能回退到默认灰 - 如果用了 Sass，直接在变量文件里重定义
$navbar-toggler-border-color，比 CSS 覆盖更彻底
自定义图标颜色后点击态失效
改了 .navbar-toggler-icon 的 background-color，但点击时图标没变色，是因为图标颜色由 background-color 控制，而 :active 状态没同步更新该属性。
Bootstrap 默认没给 .navbar-toggler-icon 写 :active 样式，所以你的自定义颜色在点击瞬间不会变化。
- 必须显式写
.navbar-toggler:active .navbar-toggler-icon { background-color: #555; } - 别用
.navbar-toggler-icon:active—— 图标是伪元素或 background-image，不支持 :active - 如果用了 mask + background-color 方案，
:active里只需改background-color，mask 不用动 - 测试真机：模拟器里的 :active 可能不触发，务必在 iOS/Android 实机上验证长按效果
实际项目中最容易忽略的是 :focus-visible 和 :active 的配套覆盖——前者影响键盘用户，后者影响触屏长按，缺一不可。单纯盯着 :hover 改，上线后总有人反馈“点不动”或“看不见焦点”。
