移动端点击高亮色是 WebKit 浏览器点击时叠加的半透明灰蓝色图层（-webkit-tap-highlight-color），会遮盖自定义点击态、干扰轮播滑动和图标显示；设为 transparent 可关闭，需作用于可点击元素且注意生效条件。
移动端点击高亮色是什么，为什么它会干扰设计
这个半透明灰蓝色遮罩（-webkit-tap-highlight-color）是 Safari、Chrome for iOS 等 WebKit 内核浏览器在用户点击可交互元素时自动添加的反馈效果。它不是伪类，不触发 :active，也不受 outline 控制，纯属渲染层叠加图层。
常见干扰场景包括：
自定义按钮点击态被盖住、轮播图滑动时误触触发高亮、图标按钮边缘出现难看色块、H5 页面追求“原生感”时显得突兀。
如何用 -webkit-tap-highlight-color 彻底关闭或自定义
直接设为透明即可移除，默认值通常是 rgba(0,0,0,0.2) 或类似。注意：该属性仅作用于 WebKit 浏览器，且必须写在可点击元素上（如 a、button、带 onclick 的 div），不能只写在 body 或全局重置里。
推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 对所有可能被点击的元素统一处理：
*, *::before, *::after { -webkit-tap-highlight-color: transparent; } - 更稳妥的方式是聚焦在交互元素上：
a, button, input, textarea, select, [onclick], [role="button"] { -webkit-tap-highlight-color: transparent; } - 若需保留轻微反馈，可设为低透明度同色系：
button { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05); }
为什么加了没生效？常见失效原因
这个属性非常“娇气”，几个典型失效点：
-
transparent写错成none——none是无效值，必须用transparent或rgba(...,0) - 样式被更高优先级规则覆盖，比如框架 CSS（如 Bootstrap）里有
!important声明 - 目标元素没有触发“可点击”状态：比如
div没加cursor: pointer或onclick，部分 iOS 版本不会应用该样式 - 页面启用了
user-scalable=no且 viewport 缩放异常，某些旧版 iOS WebView 会忽略该声明
兼容性与性能影响：要不要全站加？
该属性从 iOS 5+、Android Browser 2.1+ 就已支持，现代所有移动端浏览器都兼容，无 polyfill 需求。性能上零开销——它只是告诉渲染引擎“别画那个图层”，不涉及重排重绘。
但要注意：
全站用通配符 * 会影响可访问性工具识别点击区域；
某些依赖默认高亮做操作反馈的场景（如老年用户界面）反而应保留；
微信内置浏览器（X5 内核）早期版本对 transparent 支持不稳定，建议加 fallback：
a { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; }（虽然 tap-highlight-color 标准尚未落地，但 X5 识别这个写法）
真正容易被忽略的是：它只对“主动点击”有效，touchmove 中的模拟点击（比如 fastclick 替代方案）或 pointer events 模式下行为可能不同，这时候得配合 touch-action 或事件监听逻辑一起调。
