button:focus-visible { outline: none } 无效是因为 :focus-visible 仅在键盘导航时触发，不响应鼠标点击；真正需处理的是 button:focus:not(:focus-visible) 以关闭鼠标/触摸焦点轮廓。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

为什么 button:focus-visible { outline: none } 没用？ 你写的这行 CSS 在鼠标点击时根本不会生效——:focus-visible 本身就不响应鼠标操作，它只在键盘导航（Tab、Shift+Tab、Enter、Space）时被浏览器激活。开发者工具里看到这条规则灰掉，不是兼容性问题，是它压根没匹配上。所谓“点击出蓝框”，其实是 :focus 在起作用，而你试图用 :focus-visible 去覆盖一个它根本没参与的场景。

真正该写的是 button:focus:not(:focus-visible) 这个组合才是解决鼠标点击蓝框的关键：:focus:not(:focus-visible) 显式筛选出“有焦点但非键盘触发”的情况，比如鼠标点、触屏按、或 JS 调用 element.focus() 后无键盘上下文的状态。必须按顺序声明：

• button:focus：定义基础焦点样式（比如统一用 outline: 2px solid #007aff）
• button:focus:not(:focus-visible)：专门关掉鼠标/触摸场景的 outline，写 outline: none
• button:focus-visible：给键盘用户保留可访问的轮廓，outline 必须有值（outline: 0 或空规则无效）

哪些元素上 :focus-visible 根本不触发？ 不是所有能聚焦的元素都支持智能判断。浏览器只对语义明确、需焦点提示的控件启用该伪类：

• ✅ 默认支持：input、textarea、button、select、带 tabindex 且含 role="button" 的 div
• ❌ 基本不触发：a（无 href）、span（哪怕写了 tabindex="0"）、img（本身不可聚焦）
• ⚠️ 自定义组件要小心：用 div + tabindex 模拟按钮，但没加 role 或没监听 Enter/Space，旧 Safari 可能跳过 :focus-visible

iOS 上的半透明蓝 overlay 不是 :focus 的问题 你在 iPhone 上点按钮看到的蓝色遮罩，和 :focus 或 :focus-visible 完全无关——这是 WebKit 的 -webkit-tap-highlight-color 行为。要关掉它，得单独处理：

• 对可点击元素加 -webkit-tap-highlight-color: transparent
• 适用于 button、a、或带 onclick 的容器
• 注意：这不影响焦点逻辑，只是移除点击瞬时高亮

别指望 :focus-visible 能管这事，它连碰都不碰 tap highlight。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！