根本原因是 iOS 和部分 Android 浏览器的 -webkit-tap-highlight-color 默认反馈机制，其默认值为 rgba(0,0,0,0.2) 等半透明色；解决方法是为 a 标签显式设置 -webkit-tap-highlight-color: transparent。
移动端点击 a 标签出现灰色/蓝色阴影的根本原因
这不是 bug，而是 iOS 和部分 Android 浏览器（尤其是 WebKit 内核）的默认反馈机制：-webkit-tap-highlight-color 会在触摸点击时临时覆盖一层半透明高亮色，用于向用户确认“你点中了”。默认值通常是 rgba(0, 0, 0, 0.2) 或类似浅灰/蓝，视觉上就是那层难看的阴影。
-webkit-tap-highlight-color: transparent 是核心解法
必须直接作用于 a 标签本身（或其父容器），仅写在 body 或全局重置里可能无效。注意以下几点：
-
transparent和rgba(0, 0, 0, 0)效果一致，但前者更简洁、兼容性无差别 - 该属性只在真机触摸环境生效，PC 端模拟器或鼠标点击不会触发，所以本地调试需用真机预览
- 不要写成
-webkit-tap-highlight-color: none—— 这是无效值，会被浏览器忽略 - 若使用 CSS 预处理器（如 Sass），确保编译后仍保留该声明，某些 autoprefixer 配置会误删非标准属性
为什么 outline: none 常常没用
很多人第一反应是清 outline，但它解决的是键盘聚焦（Tab 切换）时的虚线框，和触摸点击高亮完全无关。实测中：
-
a:focus { outline: none }对点击阴影零影响 -
a:active { outline: none }同样无效，因为高亮发生在touchstart阶段，不是伪类触发的渲染 - 混用
outline: none还可能损害可访问性，除非你已用其他方式（如box-shadow）提供焦点反馈
配套建议：避免副作用与兼容陷阱
单加 -webkit-tap-highlight-color 够用，但实际项目中常连带处理几个相关问题：
立即学习“前端免费学习笔记（深入）”；
- 如果
a标签内嵌img，且图片有边框或背景，记得加img { border: none; vertical-align: top }，否则可能因基线对齐产生额外空白干扰点击区域 - 部分安卓旧机型（如 Android 4.x）需同时写
-webkit-tap-highlight-color: rgba(0,0,0,0)才稳定，transparent在极少数版本下不识别 - 若页面用了
fastclick或zepto等库，它们可能劫持了原生 touch 行为，此时高亮可能被抑制或延迟，要确认是否真的需要再加该样式 - 不要给
a标签加onfocus="this.blur()"—— 这种 JS 方式不仅冗余，还可能引发焦点丢失、表单跳转失败等问题
真正关键的只有一行：a { -webkit-tap-highlight-color: transparent; }。其它都是围绕它补漏，别本末倒置。
