移动端点击高亮是WebKit渲染层独立叠加的半透明图层，仅iOS Safari、微信X5等WebKit内核生效，Android Chrome 62+已彻底移除支持；必须对a、button、input[type="button"]等可激活元素显式设置-webkit-tap-highlight-color: transparent，并在iOS 15.4+上配合user-select: none消除残影。
移动端点击高亮不是 outline，是 -webkit-tap-highlight-color
它和 outline、:active、border 完全无关，是 WebKit 渲染层独立叠加的半透明图层，只在 iOS Safari、微信 X5 等 WebKit 内核中生效。Android Chrome 62+ 已彻底移除对该属性的支持，写了也白写。
常见错误包括：
- 给
a:active设background却发现点下去仍有灰罩——那正是-webkit-tap-highlight-color在起作用 - 加了
outline: none或border: none却没效果——它们根本不在同一渲染层级 - 在桌面 Chrome 模拟器里测试，压根不触发高亮——模拟器默认不模拟 tap 行为，必须真机验证
必须显式设置 transparent，且只对可激活元素生效
-webkit-tap-highlight-color 不继承，不能写在 body 或父容器上；值必须是 transparent 或 rgba(0,0,0,0)；写成 none、unset、initial 全部无效。
以下元素必须显式命中选择器：
立即学习“前端免费学习笔记（深入）”；
-
a、button、input[type="button"]、input[type="submit"] - 自定义按钮：同时带
role="button"和tabindex="0"的元素（仅onclick不够） - 动态插入节点（如 Vue
v-if、ReactuseState）需确保新 DOM 也匹配该选择器，否则高亮会重新出现
推荐写法：
code
a,
button,
input[type="button"],
input[type="submit"],
[role="button"][tabindex="0"] {
-webkit-tap-highlight-color: transparent;
}
iOS 15.4+ 残影需配合 user-select: none
即使设了 -webkit-tap-highlight-color: transparent，iOS 15.4+ 仍可能残留微弱灰白闪烁。这不是样式失效，而是系统默认文本可选行为触发的重绘干扰。
必须在同一元素上同时设置：
-webkit-tap-highlight-color: transparentuser-select: none
但注意：如果元素内含需复制的内容（如电话号码、地址），不能整块禁用，应把可选文本用 <span class="selectable"> 包裹，并单独设 .selectable { user-select: text; }。
Tailwind 用户要手动启用 tapHighlightColor 插件
Tailwind v3.0+ 默认禁用 tapHighlightColor 相关工具类。即使写了 class="tap-highlight-transparent"，也不会生成对应 CSS。
必须做三件事：
- 打开
tailwind.config.js，确认corePlugins中未关闭tapHighlightColor（即不能有tapHighlightColor: false） - 显式启用：
corePlugins: { tapHighlightColor: true } - 重启开发服务（
npm run dev或pnpm dev），热更新不触发新工具类编译
若不想改配置，可直接用自定义工具类：
code
@layer utilities {
.no-tap-highlight {
-webkit-tap-highlight-color: transparent;
}
}
然后在元素上加 class="no-tap-highlight"。
:active 样式、是否适配了真机上的 touch 延迟与取消行为、以及是否在 iOS 和微信 X5 上分别验证过残影问题。 
