必须同时禁用 -webkit-tap-highlight-color 和 Bootstrap 的 focus/active 样式：前者用 -webkit-tap-highlight-color: transparent 作用于 button、.btn 等可点击元素；后者用 .btn:focus, .btn:active:focus { outline: none; box-shadow: none; } 清除蓝边。
移动端点击 Bootstrap 按钮出现的蓝色高亮，不是同一个东西在反复“清不掉”，而是两个独立机制叠加的结果：一个是浏览器底层的触摸反馈层（-webkit-tap-highlight-color），另一个是 Bootstrap 的焦点样式（box-shadow + outline）。必须分别处理，缺一不可。
为什么 outline: none 和 :active 都没用
常见错误是只写 .btn:focus { outline: none; } 或给按钮加 :active { background: #fff; }，结果真机一点照旧蓝。这是因为：
-
outline: none只影响键盘聚焦框，对手指点击瞬间渲染的系统级高亮完全无效 -
:active是 CSS 伪类，生命周期极短且依赖事件路径；而-webkit-tap-highlight-color是 WebKit 内核在touchstart瞬间就合成的独立图层，两者不走同一条渲染管线 - Bootstrap 的蓝边主要来自
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)，不是outline单独撑起来的
必须同时处理两个层：tap 高亮 + focus 样式
缺一个，蓝灰块就还在。实操上分两步写 CSS，且都得作用在具体可点击元素上：
- 关掉触摸高亮：
button, .btn, [role="button"], [onclick] { -webkit-tap-highlight-color: transparent; } - 清掉焦点样式：
.btn:focus, .btn:active:focus, .btn.active:focus { outline: none; box-shadow: none; } - 不要写
* { -webkit-tap-highlight-color: transparent; }——某些旧版微信 X5 WebView 会白屏或卡顿 - 不要只写
.btn:focus，漏掉.btn:active:focus就会导致“松手那一帧还闪一下”
真机测试前最容易忽略的三件事
桌面 Chrome 模拟器默认不触发 -webkit-tap-highlight-color，开发时根本看不到问题：
- iOS Safari 必须真机测试，连 Safari 技术预览版都不完全等效
- Android Chrome 要打开“开发者工具 → Rendering → Emulate touch events”，否则模拟无效
- Vue/React 动态插入的按钮（比如
v-if切换后新渲染的）不会自动继承父级样式，得确保选择器能匹配到新 DOM 节点，例如用[class*="btn"]或加统一 class 如.js-tap-clear
最麻烦的不是写错代码，而是这两个属性只在真实触摸设备上生效、只对 WebKit 内核有效、还和可访问性提示强耦合——关得太彻底，键盘用户就找不到焦点在哪了。
