移动端点击后出现的半透明高亮框是 webkit 内核浏览器的默认视觉反馈，由 -webkit-tap-highlight-color 控制，可通过 body { -webkit-tap-highlight-color: transparent !important; } 彻底关闭。
移动端点击后出现半透明高亮框是什么
这是 iOS Safari 和部分 Android 浏览器（基于 WebKit 内核）的默认行为，用于视觉反馈用户已触发点击。它由 -webkit-tap-highlight-color 控制，不是 :active 伪类，也不受 outline 影响。
怎么彻底关掉这个高亮框
在 CSS 中直接覆盖该属性即可，注意必须加 !important（某些旧版 Safari 不认无权重的声明）：
body {
-webkit-tap-highlight-color: transparent !important;
}
- 只对可点击元素生效（
<a></a>、<button></button>、带onclick的<div> 等） <li>不能写在 <code>:active里，必须是元素的常态样式 - 若用 CSS-in-JS 或 Shadow DOM，需确保样式作用域能穿透到目标节点
- 设为
transparent最稳妥；设为rgba(0,0,0,0)在某些 Android 版本可能仍残留灰边 -
-webkit-tap-highlight-color只在 WebKit 内核生效，Chrome 桌面版、Firefox 完全不识别 - Vue/React 中动态生成的按钮，若样式通过
style属性内联，会覆盖外部 CSS —— 改用class或全局样式表 - 某些 UI 库（如 Ionic、Vant）自带重置，需在它们之后加载你的样式，或提高选择器权重（例如用
body *:not(input):not(textarea)） - 如果页面启用了
user-scalable=no且 viewport 缩放异常，部分 iOS 版本会忽略该属性 - 纯展示型按钮（如轮播图箭头、图标菜单）可以安全关闭
- 表单控件（
<input type="checkbox">、开关）建议保留默认高亮，或用:active+ 背景色变化替代 - 在 iOS 15.4+ 上，若同时设置
-webkit-appearance: none，可能意外导致按钮失焦或点击区域缩小 - 无障碍测试工具（如 axe）不会报这个高亮问题，但手动测试时要注意：关闭后需确认有其他视觉反馈（比如文字变色、图标缩放）
为什么加了没用？常见失效场景
不是代码写错，而是被更高优先级规则或渲染机制覆盖：
要不要关？权衡点在哪
关闭后交互反馈变弱，尤其对触摸精度低的用户不友好：
立即学习“前端免费学习笔记（深入）”；
真正难处理的是混合场景——比如一个 <div> 同时绑了 <code>click 和 touchstart，又用了 FastClick 类库，这时候高亮行为可能被多次拦截或延迟触发，得逐层排查事件流。
