移动端点击蓝色高亮框源于系统级 tap highlight，由 -webkit-tap-highlight-color 控制，独立于 :focus；应按需禁用（如纯图标按钮），保留可访问性焦点样式，不可全盘透明化。
移动端点击出现蓝色高亮框的根本原因
这个蓝色半透明框（iOS Safari 和部分 Android 浏览器中常见）不是 :focus 的默认表现，而是系统级的「tap highlight」——浏览器对触摸操作的视觉反馈，由 -webkit-tap-highlight-color 控制。它独立于 CSS 焦点样式，即使元素没设 tabindex、没绑定键盘焦点逻辑，只要可点击（如 <button>、<a>、带 onclick 的 <div>），就会触发。
正确禁用 tap highlight 而不破坏可访问性
直接在所有元素上写 -webkit-tap-highlight-color: transparent 看似简单，但有风险：部分屏幕阅读器依赖该高亮判断当前交互焦点，全盘关闭可能降低可访问性。更稳妥的做法是按需关闭，并保留真实焦点样式：
- 对纯装饰性点击区域（如轮播图箭头、图标按钮），加
-webkit-tap-highlight-color: transparent - 对需要键盘导航的控件（如表单按钮、菜单项），**不关闭 tap highlight**，而是用
:focus提供更清晰的焦点轮廓（例如outline: 2px solid #007aff） - 若必须关闭，仅作用于特定类：
.btn--icon { -webkit-tap-highlight-color: transparent; }
:focus 样式在移动端的实际作用边界
:focus 在触屏设备上触发条件有限：它通常只在用户通过键盘（外接或屏幕键盘）聚焦时生效，**单纯手指点击不会触发 :focus**（除非元素本身可获得焦点且点击后未失焦）。所以指望靠 :focus 替代 tap highlight 是错位的：
- 手指点击
<button>→ 触发 tap highlight，但一般不触发:focus（除非该按钮已设tabindex="0"且点击后仍保持焦点） - 用键盘 Tab 切换到按钮 → 触发
:focus，此时应有明确视觉反馈（如自定义 outline） - 想让点击也有类似反馈？得用
:active+ 手动添加 class 或 JS 监听touchstart
兼容性与真机测试要点
不同系统对 -webkit-tap-highlight-color 支持不一，且行为可能被 UA 样式覆盖：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 15.4+ 默认为
rgba(0, 0, 0, 0.1)，设transparent有效 - Android Chrome 通常忽略该属性，需配合
user-select: none或-webkit-user-select: none辅助抑制（但后者会影响文本选择） - 务必在真机上测试：模拟器常不触发 tap highlight，容易误判效果
- 某些 WebView（如微信内置）会强制启用高亮且不可覆盖，这时只能接受或改用伪元素模拟点击态
-webkit-tap-highlight-color 当成通用焦点重置手段，结果在可访问性审查中被标记为「缺少焦点指示」。真正要优化的，是区分「触控瞬时反馈」和「键盘焦点状态」这两件事。 
