ios点击元素闪出黑色/灰色阴影是系统级高亮层的默认视觉反馈，由-webkit-tap-highlight-color控制，需在真机生效、作用于可点击元素且不被pointer-events:none阻断。
为什么 iOS 点击元素会闪出黑色/灰色阴影
这是 iOS Safari（及所有 WebKit 内核浏览器）的默认行为，用于视觉反馈点击区域。它和 :active 伪类无关，也不受 outline 或 background 影响，而是由系统级高亮层控制。Android Chrome 早期也有类似表现，但现代版本已基本收敛或可被统一处理。
-webkit-tap-highlight-color 必须写全且生效条件明确
这个属性只在真机（或模拟真机的 Safari 开发者工具）中起作用，桌面 Chrome 模拟移动端时可能不触发；必须作用于可点击的元素（如 <a></a>、<button></button>、带 onclick 的 <div>），且不能被父级 <code>pointer-events: none 阻断。
-
-webkit-tap-highlight-color: transparent是最简写法，兼容性最好 -
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)效果相同，但部分旧版 iOS 要求明确 alpha 值 - 不要只写
tap-highlight-color（无前缀），它在任何主流浏览器中都不被支持 - 如果用通配符
*全局重置，记得加在 CSS 文件靠前位置，避免被后续规则覆盖
input、textarea 和 a 标签要单独处理
某些表单控件（尤其是 <input type="text">）在 iOS 上除了 tap highlight，还会叠加自身聚焦样式（圆角+阴影），仅靠 -webkit-tap-highlight-color 不够。
- 对文本类输入框加：
-webkit-appearance: none+border: none+outline: none - 若需保留原生滚动条或光标行为，改用：
-moz-appearance: textfield（Firefox）和::-webkit-inner-spin-button { display: none } - 对
<a></a>标签，建议连带清除a:active的背景干扰：a:active { background: none; }
为什么加了还是闪？检查这三处
常见失效不是代码写错，而是环境或层级问题：
- 页面未启用 viewport：确保有
<meta name="viewport" content="width=device-width, initial-scale=1"> - CSS 被 scoped 或 Shadow DOM 封装：在 Vue/Svelte 组件中，
-webkit-tap-highlight-color不会穿透作用域，需写在全局样式或用:deep()提升 - 元素被
transform: translateZ(0)或will-change: transform触发硬件加速后，部分 iOS 版本会忽略该样式——此时换用-webkit-transform: translateZ(0.1px)可绕过
真正难搞的是混合 WebView 场景（比如微信内置浏览器或 App 内嵌页），有些壳会强制注入自己的高亮逻辑，这时候只能靠 JS 拦截 touchstart 并 preventDefault()，但会牺牲部分可访问性，慎用。
