移动端点击高亮由-webkit-tap-highlight-color控制，非outline或:active；需同时设transparent和移除box-shadow/outline，并确保viewport meta存在、样式写在元素常态上。
为什么 outline: none 和 :active 都没用
移动端点击后出现的蓝色/灰白高亮，根本不是 outline 或 :active 控制的。它是 WebKit 内核（iOS Safari、微信 X5）在 touchstart 瞬间合成的一层独立渲染图层，和 CSS 伪类生命周期完全不重合。你写 button:focus { outline: none; } 只影响键盘聚焦框；写 button:active { background: #fff; } 在 iOS 上几乎不可见——因为高亮层直接盖在所有样式之上。
必须同时关掉两个独立层
真机上看到的“蓝灰块”是两层叠加的结果：
- -webkit-tap-highlight-color 控制的系统级触摸反馈层
- Bootstrap 或自定义 CSS 中的
box-shadow（比如box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)）和outline
缺一不可。实操要分两步写：
button, .btn, a, [role="button"], [onclick] { -webkit-tap-highlight-color: transparent; }
.btn:focus, .btn:active:focus, .btn.active:focus { outline: none; box-shadow: none; }
注意：[onclick] 不匹配 JS addEventListener 绑定的元素，动态插入的按钮（如 Vue 的 v-if、React 的 useState 渲染）必须确保 class 或 role 也命中上述选择器。
哪些地方最容易漏写或写错
失效通常不是语法错误，而是环境或作用域问题：
- 页面缺少
—— 浏览器不启用移动端渲染模式，-webkit-tap-highlight-color直接不计算 - 写了
* { -webkit-tap-highlight-color: transparent; }—— 某些旧版微信 X5 会白屏或卡顿 - 把
-webkit-tap-highlight-color写在a:active这类伪类里 —— 它只接受常态样式，必须写在a本身上 - 值用了
none、unset或rgba(255,255,255,0)—— 只有transparent或rgba(0,0,0,0)被识别
禁用后必须手动补点击反馈
关掉高亮不等于可以不管用户感知。否则点下去毫无响应感，尤其对触摸精度低的用户不友好：
给 .btn:active 加轻量反馈，比如：
.btn:active { transform: scale(0.98); }
或者改背景色：
.btn:active { background-color: #e9ecef; }
如果用 div 模拟按钮，除了 -webkit-tap-highlight-color: transparent，还得加 cursor: pointer 和 role="button"，否则屏幕阅读器可能忽略它。iOS 15.4+ 还可能出现残留闪烁，此时得配合 -webkit-user-select: none 才能彻底清掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
