-webkit-tap-highlight-color: transparent是唯一有效解法，因其直接关闭WebKit内核的系统级点击高亮层，而outline: none、:active或box-shadow均无法影响该独立渲染层；该属性仅对可点击元素生效，且必须真机测试验证。
为什么 -webkit-tap-highlight-color: transparent 是唯一有效解法
这个阴影不是 outline、:active 或 box-shadow，而是 iOS 和部分 Android WebView 的系统级高亮层。不带 -webkit- 前缀的 tap-highlight-color 在任何主流浏览器里都不识别；设成 rgba(0, 0, 0, 0) 在旧版 Android（如 4.3）可能失效，而 transparent 兼容性最稳。
必须作用在可点击元素上，且只在真机或 Safari 真机模拟器中生效。桌面 Chrome 模拟器根本看不到效果，等上真机才发现满屏灰块。
哪些元素必须单独加 -webkit-tap-highlight-color: transparent
该属性不继承，也不能用 CSS 变量控制，必须逐个写在目标元素上：
- 语义化交互元素：
a、button、input[type="button"]、input[type="submit"]
- 自定义交互容器：对绑了
@click 或 onclick 的 div，需同时加 role="button" 和 tabindex="0"
- 推荐组合选择器（兼顾可访问性）：
a, button, input[type="button"], input[type="submit"], [role="button"], [tabindex="0"]
- 避免写
* { -webkit-tap-highlight-color: transparent }：部分 WebView 会忽略，还可能干扰屏幕阅读器焦点识别
写了却还有阴影？优先检查这三处
失效极少因代码写错，多是环境或层级问题：
- 页面缺
<meta name="viewport" content="width=device-width, initial-scale=1"> —— 没启用移动端渲染模式，该样式不参与计算
- 元素被
pointer-events: none 的父容器包裹，或父级设置了 will-change: transform —— 部分 iOS 版本会跳过高亮层绘制
- 真机调试时发现按钮没生效 —— 大概率是它没被识别为“可点击”，比如没监听事件、没设
cursor: pointer、或被 UI 库（如 Ant Design）默认样式覆盖；务必查 DevTools 的 Computed Styles，确认该属性未被 strikethrough
关掉高亮后，用户点着没反馈怎么办
关掉系统高亮 ≠ 提供点击态。用户点下去没视觉变化，会怀疑没点上：
- 必须手动补
:active 样式，推荐用 transform: scale(0.98)，比改背景色或 opacity 更轻量，不触发重排
- 避免写
a:active { color: #666; } 这类低对比度变化，iOS 上 :active 有约 300ms 延迟（除非已启用 touch-action: manipulation）
- 如果用了
touchstart + touchend 手动加 class 实现反馈，记得在 touchcancel 里也移除，否则状态卡死
a、button、input[type="button"]、input[type="submit"]
@click 或 onclick 的 div，需同时加 role="button" 和 tabindex="0"
a, button, input[type="button"], input[type="submit"], [role="button"], [tabindex="0"]
* { -webkit-tap-highlight-color: transparent }：部分 WebView 会忽略，还可能干扰屏幕阅读器焦点识别- 页面缺
<meta name="viewport" content="width=device-width, initial-scale=1">—— 没启用移动端渲染模式，该样式不参与计算 - 元素被
pointer-events: none的父容器包裹，或父级设置了will-change: transform—— 部分 iOS 版本会跳过高亮层绘制 - 真机调试时发现按钮没生效 —— 大概率是它没被识别为“可点击”，比如没监听事件、没设
cursor: pointer、或被 UI 库（如 Ant Design）默认样式覆盖；务必查 DevTools 的 Computed Styles，确认该属性未被 strikethrough
关掉高亮后，用户点着没反馈怎么办
关掉系统高亮 ≠ 提供点击态。用户点下去没视觉变化，会怀疑没点上：
- 必须手动补
:active 样式，推荐用 transform: scale(0.98)，比改背景色或 opacity 更轻量，不触发重排
- 避免写
a:active { color: #666; } 这类低对比度变化，iOS 上 :active 有约 300ms 延迟（除非已启用 touch-action: manipulation）
- 如果用了
touchstart + touchend 手动加 class 实现反馈，记得在 touchcancel 里也移除，否则状态卡死
:active 样式，推荐用 transform: scale(0.98)，比改背景色或 opacity 更轻量，不触发重排a:active { color: #666; } 这类低对比度变化，iOS 上 :active 有约 300ms 延迟（除非已启用 touch-action: manipulation）touchstart + touchend 手动加 class 实现反馈，记得在 touchcancel 里也移除，否则状态卡死真正在意兼容性时，绕开 -webkit-tap-highlight-color 更稳妥——它本质是 WebKit 私有补丁，跨平台不可靠。更底层的方案是给容器加 touch-action: manipulation，既能消除 300ms 延迟，也能抑制部分高亮行为，且 Chrome / Safari / Edge 均支持。
