outline: none 需配合 :focus 伪类使用才生效，仅写在元素上无效；firefox 需额外重置 ::-moz-focus-inner；ie6/7 需 hidefocus 属性或 js；移除前必须提供替代焦点样式以保障可访问性。
outline: none 能解决大部分现代浏览器的点击虚线框问题，但直接写它往往不生效——不是属性错了，是时机、选择器或兼容性没对上。
为什么 outline: none 有时不起作用
常见错误是只加在 button 上，却忽略了:focus状态；或者用在了父容器而非可聚焦元素本身。虚线框本质是浏览器对「获得焦点」（focus）状态的默认样式反馈，所以必须作用于:focus伪类，或至少覆盖其默认行为。
-
button { outline: none; }—— 只移除常态下的outline，点击后仍会触发:focus样式 - 正确写法应为：
button:focus { outline: none; }或更稳妥地：button:focus, input:focus, a:focus { outline: none; } - 若用了
!important，需确认没有更高优先级的CSS（比如框架自带的reset或UI库样式）把它顶掉 - Firefox 对
input和button还有::-moz-focus-inner的内边框，不单独清它，可能残留1px偏移或虚影
Firefox 下的 ::-moz-focus-inner 必须单独处理
Firefox 会给 button 和 input[type="button"] 自动插入一个不可见的伪元素，带默认边框和padding，导致即使 outline: none 也看起来“有框”或按钮尺寸微变。
- 必须显式重置：
button::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border: 0; padding: 0; } - 这个伪元素仅 Firefox 识别，不影响其他浏览器，可放心加
- 如果用了自定义背景或圆角，没清这个，常出现视觉错位或点击后轻微“跳动”
IE6/IE7 需要 fallback 方案
这些老版本根本不支持 outline，也不能识别 :focus 伪类（除了链接），纯 CSS 无法覆盖。这时候得靠 HTML 属性或 JS。
- 给每个
button或a加hidefocus="true"（IE专有属性）：<button hidefocus="true">提交</button> - 或用内联 JS（不推荐但有效）：
<button onfocus="this.blur()">提交</button> - 如果项目仍需兼容 IE6/7，建议用脚本批量处理：
document.querySelectorAll('button, input[type="button"], a').forEach(el => el.setAttribute('hidefocus', 'true'));
别忽略可访问性代价
去掉 focus 样式最常被忽略的后果，是键盘用户（Tab 导航）彻底失去焦点位置感知。这不是“美化问题”，是 WCAG 2.1 明确要求的可访问性缺陷。
- 真要隐藏默认虚线，务必提供替代焦点样式，例如：
button:focus { outline: 2px solid #007bff; outline-offset: 2px; } - 避免全站无差别写
*:focus { outline: none; }—— 这等于关闭所有键盘导航线索 - 如果按钮本身有明显 hover/active 变化（如背景色切换），且不在表单流中，可酌情移除；但表单提交、模态框关闭等关键操作按钮，强烈建议保留可见焦点反馈
真正难的不是让虚线消失，而是判断它该不该消失、以及消失后用户怎么知道“现在焦点在哪”。outline: none 是把双刃剑，用之前先想清楚交互链路是否完整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
