移动端点击高亮是ios safari等webkit浏览器为可点击元素添加的半透明灰色蒙层反馈，用-webkit-tap-highlight-color: transparent可关闭，须作用于a、button等可激活元素，不继承，android chrome 70+支持无前缀标准属性。
移动端点击高亮是什么鬼？
你在 iOS Safari 或某些 Android 浏览器里点按钮，会看到一圈半透明灰色蒙层——这不是 bug，是浏览器默认的 tap-highlight-color 反馈。它本意是给用户“我点到了”的视觉确认，但和你的设计稿冲突时，就显得突兀甚至遮挡文字。
如何用 CSS 彻底关掉它？
直接写 -webkit-tap-highlight-color: transparent 就行，但必须加在可点击的元素上，且仅对 <a></a>、<button></button>、带 onclick 的 <div> 等触发点击事件的标签生效。<p>常见写法：</p>
<pre class="brush:php;toolbar:false;">a, button, [onclick], .clickable {
-webkit-tap-highlight-color: transparent;
}</pre>
<ul>
<li>别只写 <code>body 或 html，它不继承
tap-highlight-color（无前缀），但 iOS Safari 至今只认 -webkit- 前缀，必须保留transparent 最稳妥；设成 rgba(0,0,0,0) 也行，但部分旧版 UC 浏览器会失效为什么加了还不生效？
大概率是这几个原因：
- 目标元素没触发点击行为：比如
<div> 没加 <code>onclick、role="button"或tabindex，iOS 不认为它是可点区域 - CSS 优先级被覆盖：检查是否被其他样式（如第三方 UI 库）用
!important覆盖了 - 用了伪类干扰：比如同时写了
a:active { opacity: 0.8 }，可能掩盖了高亮清除效果，建议先注释掉调试 - WebView 场景特殊：某些混合 App 的 WebView（如微信内嵌页）会强制启用高亮，CSS 无效，得靠 JS 拦截
touchstart并preventDefault()
要不要留一点反馈？
完全去掉高亮后，用户可能感觉“点不动”。更稳妥的做法是用 :active 自定义轻量反馈：
.btn {
-webkit-tap-highlight-color: transparent;
}
.btn:active {
background-color: #eee; /* 或 transform: scale(0.95) */
transition: background-color 0.1s;
}
注意：iOS 上 :active 默认延迟 300ms 触发（为双击缩放留时间），需加 touch-action: manipulation 来禁用双击缩放并让 :active 立即响应。
真正难处理的是那些既要兼容老 iOS、又要适配现代 WebView、还得兼顾无障碍点击语义的场景——这时候光靠 CSS 不够，得结合 role、tabindex 和最小点击区域（44×44px）一起调。
