a标签上直接写outline:none无效，因outline仅在:focus时生效且被更具体规则覆盖；应使用a:focus{outline:none}或:focus-visible兼顾可访问性，避免损害键盘导航体验。
outline: none 为什么不能直接写在 a 标签上？
因为 outline 默认只在元素获得焦点（focus）时显示，而普通 a 链接在点击瞬间触发 focus，但浏览器对可聚焦元素的 outline 样式有默认 UA 样式控制，直接写 a { outline: none; } 往往无效——它被更具体的规则（比如 a:focus）覆盖了。
必须显式针对聚焦态重置：
- 写成
a:focus { outline: none; }才生效 - 如果用了
tabindex或 JS 触发 focus，也要考虑:focus-visible的现代行为 - 某些浏览器（如 Safari）在鼠标点击时不触发
:focus，只在键盘 tab 时才显示 outline，所以单纯禁用可能掩盖可访问性问题
如何安全移除 outline 又不破坏可访问性？
完全去掉 outline 会让键盘用户失去当前焦点位置的视觉反馈，这是 WCAG 不推荐的做法。更稳妥的方式是「替换」而非「删除」：
- 用
a:focus { outline: 2px solid #007bff; outline-offset: 2px; }改为清晰、高对比的样式 - 或结合
:focus-visible实现「仅键盘聚焦时显示 outline」：a:focus { outline: none; }<br>a:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; } - 注意
outline-offset能避免 outline 和边框重叠，提升可读性
为什么有时 outline 还是没消失？检查这些地方
即使写了 a:focus { outline: none; }，虚线框仍存在，常见原因包括：
- CSS 优先级不够：检查是否被
!important或更具体的选择器（如.nav-link:focus）覆盖 - 伪类顺序错误：确保
:focus写在:hover之后，否则可能被后者样式干扰 - 框架/组件库干预：React 组件、Bootstrap 或 Tailwind 的
focus:outline-none类可能未启用，或被其他 utility class 覆盖 - Firefox 的
outline-style: auto行为：某些版本会忽略outline: none，需强制加outline-style: none
outline 和 border 的关键区别在哪？
很多人想用 border 替代 outline，但要注意本质差异：
-
outline不占布局空间，不影响元素尺寸和流式排版；border会改变box-sizing下的宽高 -
outline始终是矩形，无法设置圆角（outline-radius不存在）；border-radius对border有效 -
outline无法分边设置（没有outline-top），只能整体控制 - 移除 outline 后若需视觉反馈，推荐用
box-shadow: 0 0 0 2px #xxx;模拟，它既不占位又支持圆角
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
