移动端点击后出现的半透明蓝灰色边框是 ios safari 和部分安卓浏览器的“点击高亮反馈”，由 -webkit-tap-highlight-color 控制，非 :active 伪类或 outline，需设为 transparent 彻底关闭。
移动端点击后出现半透明蓝灰色边框是什么
这是 iOS Safari 和部分安卓浏览器的默认行为，叫“点击高亮反馈”，用 webkit-tap-highlight-color 控制。它不是 :active 伪类，也不是 outline，所以加 outline: none 没用。
常见错误现象：
– 点击按钮/链接后闪一下难看的高亮框
– 高亮颜色和设计稿冲突（比如深色背景上显白边）
– 用 user-select: none 或 -webkit-user-drag: none 试图解决，完全无效
怎么彻底关掉这个高亮边框
直接在需要禁用的元素上设置 webkit-tap-highlight-color，值设为 transparent：
button, a, .clickable {
-webkit-tap-highlight-color: transparent;
}注意几点：
立即学习“前端免费学习笔记（深入）”；
-
-webkit-tap-highlight-color只作用于可点击元素（如<a></a>、<button></button>、带onclick的<div>），纯静态 <code><div> 不会触发<li>必须写 <code>-webkit-前缀，不支持无前缀版本 - 不能写成
rgba(0,0,0,0)，只认transparent或具体颜色值（如#ff0000） - 设为
transparent后，点击时完全无视觉反馈——如果需要自定义点击态，得额外写:active - 页面没加 viewport meta，比如漏了
<meta name="viewport" content="width=device-width, initial-scale=1">，iOS 会降级到“桌面模拟模式”，tap-highlight行为异常 - 元素被设置了
pointer-events: none，但父级又透传了点击，导致高亮出现在父容器上，而不是你写的那个选择器里 - 使用了 FastClick 或其他 touch 事件库，它们可能绕过原生 tap 流程，让该样式失效（此时要查库文档，看是否提供 disableHighlight 选项）
- 某些安卓 WebView（尤其旧版）不支持该属性，需配合
outline: none+:active { opacity: 0.99 }做降级 - 全局写
* { -webkit-tap-highlight-color: transparent; }会强制浏览器对每个元素做样式计算，低端机上滑动可能卡顿 - 屏幕阅读器用户依赖这个高亮确认焦点位置，全关掉会影响可访问性（WCAG 2.1 要求可见焦点指示）
- 更稳妥的做法是：只加给明确不需要反馈的组件，比如轮播图的左右箭头、图标按钮、自定义 switch
- 如果产品强依赖无障碍，保留高亮，改用
-webkit-tap-highlight-color: rgba(128, 128, 128, 0.2)微调成柔和色
为什么有些设备上还是有高亮
不是 CSS 没生效，而是触发条件没满足。容易被忽略的点：
要不要全局重置所有元素的 tap-highlight
不建议。性能和可访问性都有代价：
真正麻烦的从来不是加一行 CSS，而是搞清它在哪起效、在哪失效、以及谁在背后悄悄接管了点击逻辑。
