-webkit-tap-highlight-color: transparent 是唯一可靠解法，因该属性为 iOS/Android WebView 系统级高亮层，不带前缀无效，transparent 兼容性优于 rgba(0,0,0,0)，且必须作用于可点击元素并在真机或 Safari 模拟器中生效。
-webkit-tap-highlight-color: transparent 是唯一可靠解法，但必须写对位置、对象和环境，否则白加。
为什么 -webkit-tap-highlight-color 必须设为 transparent 而不是 rgba(0,0,0,0)
这个灰色阴影不是 :active、outline 或 box-shadow，而是 iOS 和部分 Android WebView 的系统级点击高亮层。不带 -webkit- 前缀的属性在任何主流浏览器里都不识别；rgba(0,0,0,0) 在旧版 Android（如 4.3）可能被忽略，而 transparent 兼容性最稳，且语义明确。
哪些元素必须显式声明该样式
该样式只对“被系统识别为可点击”的元素生效，不能靠通配符或父级继承：
-
a、button、input、textarea这类原生可交互元素必须单独加 - 带
onclick、@click或role="button"的div也要显式设置 -
input[type="text"]在 iOS 上还有自身聚焦阴影，单靠此属性不够，建议额外加-webkit-appearance: none - Vue/React 中使用 scoped 样式或 Shadow DOM 时，需用
:deep()或提至全局 CSS
写了却没生效？优先排查这三处
失效极少因代码写错，多是环境或层级问题：
- 页面缺少
—— 浏览器未启用移动端渲染模式，该样式不参与计算 - 元素被
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 拦截：touchstart 时加临时 class，touchend 时移除，配合 user-select: none 和 -webkit-user-drag: none 防误触。这类环境里，CSS 层面的控制权早已不在你手上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
