-webkit-tap-highlight-color: transparent 是唯一可靠解法，因该属性为 iOS/Android WebView 系统级高亮层，不带前缀无效，transparent 兼容性优于 rgba(0,0,0,0)，且必须作用于可点击元素并在真机或 Safari 模拟器中生效。
-webkit-tap-highlight-color: transparent 是唯一可靠解法，但必须作用在可点击元素上，且只在真机或 Safari 真机模拟器中生效。
为什么 -webkit-tap-highlight-color 必须写全前缀且设为 transparent
这个阴影不是 :active、outline 或 box-shadow，而是 iOS 和部分 Android WebView 的系统级高亮层。不带 -webkit- 前缀的 tap-highlight-color 在任何主流浏览器里都不被识别；设为 rgba(0, 0, 0, 0) 在旧版 Android（如 4.3）可能失效，而 transparent 兼容性最稳。
常见错误包括：
- 只在
* {}里声明——部分 Android 浏览器会忽略通配符下的该属性 - 写在
body或html上——无效，必须命中具体可交互元素 - 用在纯静态
span或没绑定事件的div上——不会触发，自然也不生效
哪些元素必须单独加样式
a、button、input、textarea 和带 onclick/@click 的 div 都需要显式设置。尤其注意：
立即学习“前端免费学习笔记（深入）”；
-
input[type="text"]在 iOS 上除 tap highlight 外，还有自身聚焦圆角+阴影，单靠-webkit-tap-highlight-color不够，建议额外加-webkit-appearance: none -
a标签若无href，部分 Android WebView 仍会触发高亮，需确保语义正确或补role="button" - Vue/React 组件中，scoped 样式或 Shadow DOM 会阻断样式穿透，得用
:deep()或提至全局 CSS
加了还是闪？优先检查这三处
失效极少因代码写错，多是环境或层级问题：
- 页面缺
<meta name="viewport" content="width=device-width, initial-scale=1">—— 没启用移动端渲染模式，该样式不参与计算 - 元素被
pointer-events: none的父容器包裹，或父级设置了will-change: transform—— 部分 iOS 版本会跳过高亮层绘制；可尝试改用-webkit-transform: translateZ(0.1px)替代 - 真机调试时发现部分按钮没生效——大概率是它没被识别为“可点击”，比如没监听事件、没设
cursor: pointer、或被 UI 库（如 Ant Design）的默认样式覆盖，需查 computed styles 确认该属性是否真实生效（非 strikethrough 状态）
混合 WebView 场景下不能依赖 CSS
微信内置浏览器、App 内嵌页等壳环境，可能强制注入自己的高亮逻辑，此时 -webkit-tap-highlight-color 完全失效。唯一兜底方式是 JS 拦截：
element.addEventListener('touchstart', e => e.preventDefault(), { passive: false });但要注意：preventDefault() 会禁用原生滚动和可访问性行为，慎用；仅当业务强要求且已评估无障碍影响时才考虑。
真正难搞的是多层封装 + 低版本 WebView + 自定义壳逻辑的组合，这时候光靠 CSS 已经不够，得结合运行时 UA 判断和 fallback 降级策略。
