移动端点击高亮是webkit浏览器在触摸设备上为可点击元素添加的半透明蒙版反馈，由-webkit-tap-highlight-color控制，仅作用于真实触控且满足可激活条件的元素，设为transparent或rgba(0,0,0,0)可关闭。
移动端点击高亮是什么东西？
就是你点一下按钮或链接，iOS Safari、Android Chrome 会默认加一层半透明灰/蓝蒙版——不是 bug，是浏览器内置的「触摸反馈」。它只在真实触摸设备上触发，PC 模拟器里看不到，但真机一试就明显。
这个效果由 -webkit-tap-highlight-color 控制，是个 WebKit 专属 CSS 属性，现代 Chromium 和 Safari 都认，但 Firefox 完全不支持（它压根没这层高亮）。
怎么关掉它？最简写法和常见翻车点
直接设为透明就行，但必须注意三点：
-
-webkit-tap-highlight-color必须写在可点击元素上（比如a、button、带onclick的div），不能只写在body或全局*上——很多人的样式没生效，就是因为挂错地方了 - 值必须是
rgba(0,0,0,0)或transparent；写成none或unset无效 - 如果元素有
outline: none但没关-webkit-tap-highlight-color，点下去还是会有高亮——这两个是独立机制，别混淆
示例：
button, a {
-webkit-tap-highlight-color: transparent;
}
为什么有时关不掉？兼容性和触发条件
这个属性只在满足「可激活」条件时才起作用。常见失效场景：
- 元素没有
cursor: pointer且没绑定任何交互（比如纯静态div），即使写了属性也无反应 - 父容器设置了
-webkit-user-select: none，可能干扰 tap 高亮捕获（尤其在 iOS 15+） - 页面启用了
viewport的user-scalable=no，某些 Android 旧版 WebView 会忽略该样式 - CSS 优先级被覆盖：比如框架组件内联了更高权值的
-webkit-tap-highlight-color，得用!important强制覆盖（不推荐，优先查源码改）
要不要全站统一关？性能和体验权衡
关掉高亮本身没性能损耗，但会影响用户感知：
- 对纯功能按钮（如「提交」「返回」）建议关闭，避免干扰视觉反馈设计
- 对列表项、卡片等需要明确点击区域的场景，保留默认高亮反而更符合直觉——尤其老年用户或触控精度低的设备
- 如果自己用
:active做了按压动画，务必测试真机：iOS 下:active伪类默认延迟 300ms 触发，得加touch-action: manipulation才能同步响应
真正容易被忽略的是：这个属性不会继承，也不能用 CSS 自定义属性（var(--tap-color)）动态控制，每次修改都得重写规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
