直接加 -webkit-tap-highlight-color: transparent 可消除移动端点击图标时的半透明高亮层，该高亮由浏览器原生控制，非 box-shadow，需作用于具体可点击元素。
直接加 -webkit-tap-highlight-color: transparent 就能解决，这是 WebKit 内核浏览器（包括 iOS Safari、微信内置浏览器、大部分安卓 WebView）点击时默认渲染的半透明高亮层，不是你写的 shadow，也不是 box-shadow，删不掉样式就一直存在。
为什么 H5 在移动端点击图标会有阴影
这个“阴影”其实是 tap 高亮反馈（tap highlight），由浏览器原生控制，和 CSS 的 box-shadow 无关。它只在真机或模拟触摸环境触发，PC 浏览器调试时看不到；iOS 上更明显，常表现为灰色/黑色半透明块，覆盖整个可点击区域。
- 触发条件：元素有
onclick、@click、href、role="button"等交互属性 - 影响范围：所有带交互行为的标签，包括
<image>、<uni-icon>、<view>套了事件监听器的情况 - uni-app 特殊点：
uni-icon组件默认没加user-select: none或禁用高亮，容易被连带触发
怎么加 -webkit-tap-highlight-color 才有效
必须作用到具体可点击的元素上，全局通配虽快但有副作用；优先写在组件内或页面级样式中，避免污染第三方 UI 库。
- 推荐写法（精准控制）：
.icon-btn { -webkit-tap-highlight-color: transparent; } - 慎用通配（如
*{-webkit-tap-highlight-color:transparent}），可能让输入框失去聚焦反馈、影响可访问性 - 如果用了
<button>标签，记得同时加border: none; outline: none;，否则部分安卓机型会叠加默认边框阴影 - uni-app 中若用
<uni-icon>包在<view @click="xxx">里，样式要打到外层view上，而非uni-icon自身
还有哪些情况看起来像阴影但不是 tap 高亮
别一概而论全归给 -webkit-tap-highlight-color，先排除其他干扰项：
- 组件自带
is-shadow属性（如uni-card）—— 这是真box-shadow，关掉属性或覆盖 CSS 即可 - 页面切换过渡动画里的 fade 效果残留（
uni-transition默认 fade）—— 修改effect为slide-right或重写 enter/leave 类名 - nvue 页面里
shadow属性在某些安卓机型渲染异常 —— nvue 下建议直接关闭该属性，改用自定义 view +box-shadow - 微信小程序里
button组件默认灰色背景 —— H5 端不存在，但混写平台逻辑时容易误判
最易被忽略的是：有些图标用 <image> 标签实现，又没加 display: block，导致父容器因 inline 行内特性产生基线间隙，被误认为“阴影”。遇到疑似问题，先打开真机调试器看 computed styles，确认阴影来源再动手。
