不应无条件设置 outline: none，因其会损害键盘用户可访问性；正确做法是用 :focus-visible 区分键盘与鼠标焦点，或通过 JavaScript 检测 Tab 键动态添加焦点样式。
默认情况下，当一个可聚焦的元素（如 input、button、a）通过键盘 Tab 键获得焦点时，浏览器会添加一个蓝色（或其他颜色）的轮廓边框（outline），这是为了满足无障碍访问需求。如果你用 outline: none; 直接移除，虽然视觉上消失了，但会损害可访问性——键盘用户将无法判断当前焦点在哪。
为什么不要无条件设置 outline: none
屏幕阅读器和键盘导航用户依赖这个焦点指示来操作页面。移除 outline 且不提供替代方案，等于让这部分用户“失明”。WCAG（Web 内容可访问性指南）明确要求：焦点状态必须清晰可见。
安全移除 outline 的正确做法
只在用户**非键盘操作**（比如鼠标点击或触摸）时隐藏 outline，而保留键盘焦点的视觉反馈。可通过 :focus-visible 伪类实现：
- 给需要处理的元素添加
outline: none;和focus-visible样式 - 利用
:focus-visible仅在真正由键盘触发焦点时才显示 outline - 配合
:focus:not(:focus-visible)隐藏鼠标/触摸触发的 outline
示例代码：
立即学习“前端免费学习笔记（深入）”；
button, input, a[href] {
outline: none;
}
button:focus-visible,
input:focus-visible,
a[href]:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
}
如果必须兼容老浏览器（如 IE 或旧版 Safari）
可以结合 JavaScript 检测键盘操作，动态加 class：
- 监听
keydown事件，检测是否按了 Tab 键 - 首次 Tab 触发后，给
加keyboard-focus类 - CSS 中写
.keyboard-focus button:focus { outline: 2px solid #007bff; } - 鼠标点击时移除该 class，避免干扰
替代 outline 的友好方案
不一定要用 outline，也可以用其他高对比度、易识别的样式表示焦点：
- 增加内阴影：
box-shadow: 0 0 0 3px rgba(0, 123, 195, 0.25); - 改变边框颜色+粗细：
border: 2px solid #007bff; - 添加背景色变化（注意确保文字仍可读）
- 配合图标或文字提示（适合工具按钮等）
