img 本身不可聚焦，:focus-visible 对其无效；蓝框实际来自父元素（如 a 或 button）的焦点样式，需在可聚焦容器上设置 :focus-visible 并确保 outline 显式声明。
img 元素本身不会触发 :focus-visible，点击它出现蓝色外框，基本可以确定是它被包裹在 a 或 button 里，或者设置了 tabindex——真正聚焦的是父容器或可聚焦元素，不是图片本身。
为什么给 img 写 :focus-visible 没用
img 默认不可聚焦，没有焦点状态，:focus-visible 对它完全不生效。所谓“图片蓝框”，99% 是以下两种情况之一：
- 图片放在
@#@#@#@#@#@#@#@#@#@0中，点击时a获得焦点，浏览器渲染其默认outline - 图片用作按钮（比如
<button><img></button>），焦点落在button上，而非img
直接对 img 写 img:focus-visible { outline: none; } 不会起作用，CSS 选择器根本匹配不到。
a 和 button 容器必须显式处理 :focus-visible
要精准控制蓝框是否显示，得在可聚焦的父元素上操作，并满足两个硬性前提：
- 页面不能有全局
*:focus { outline: none; }或框架（如旧版 Bootstrap）的粗暴重置 - 必须显式声明
outline样式，空规则无效
推荐写法（以链接图片为例）：
code>a:focus { outline: none; }
a:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
注意：outline-offset: 2px 很关键，否则可能和 a 的边框重叠；outline-width 建议 ≥2px，满足 WCAG 对焦点指示的尺寸要求。
Safari 和移动端 WebView 必须降级处理
:focus-visible 在 Safari 15.4+ 才稳定支持，iOS WebView、部分安卓 WebView 仍会忽略它。此时需 JS 补位：
- 监听
keydown，检测Tab、Arrow、Enter等键，动态给a加focus-visible类 - 对
click事件加setTimeout(() => el.blur(), 0)可避免鼠标点击后残留蓝框，但慎用——它会打断键盘用户的连续 Tab 流 - 更稳妥的 H5 适配：给
html, body加-webkit-tap-highlight-color: transparent，专治点击闪蓝背景
别忘了图片链接的 border 问题
如果蓝框是实线、紧贴图片边缘，那大概率不是 outline，而是老式浏览器对 a > img 的默认 border（尤其 IE6/7）。这种必须清 border：
code>a img { border: none; }
这个和焦点无关，是历史遗留样式，:focus-visible 完全不覆盖它。现代项目虽少见，但在兼容旧环境或某些 CMS 输出中仍可能出现。
真正难的从来不是怎么去掉蓝框，而是判断它到底来自哪一层：是 outline、border、tap-highlight-color，还是父元素的 box-shadow？混在一起查，容易改了 A 却漏了 B。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
