使用CSS outline可提升键盘导航体验，因它不占布局空间且兼容辅助技术。通过调整outline-color、outline-offset及配合prefers-contrast，既能美化焦点样式，又保障可访问性，推荐在:focus-visible中应用以兼顾美观与可用性。
在网页中，焦点样式（focus style）对可访问性至关重要。默认的浏览器焦点轮廓往往不够美观或与设计风格不一致。使用 CSS outline 属性结合颜色调整，可以显著提升键盘导航用户的体验，同时保持界面美观。
为什么用 outline 而不是 border？
outline 与 border 不同，它不会影响元素的布局尺寸，绘制在元素边缘之外，不会导致页面重排。这对于动态显示的焦点状态非常友好。
更重要的是，outline 可以完整环绕元素，包括圆角和复杂形状，视觉反馈更清晰。
- outline 不占据空间，避免布局跳动
- 支持 outline-color、outline-style、outline-width 和 outline-offset
- 可被高对比度模式等辅助技术识别
使用 outline-offset 控制距离
默认的 outline 紧贴边框，可能显得拥挤。通过 outline-offset 可以增加间隙，让焦点更清晰。
立即学习“前端免费学习笔记（深入）”；
:focus {outline: 2px solid #005fcc;
outline-offset: 2px;
}
数值为负时，outline 会向内偏移（一般不推荐）。通常设置 1px 到 4px 的正值，视觉效果最佳。
结合颜色提升可访问性
选择焦点颜色时，要考虑与背景的对比度。WAI-ARIA 建议焦点指示器与周围内容至少有 3:1 的对比度。
- 使用主题色强化品牌感，如蓝色或绿色
- 避免与错误提示颜色（如红色）冲突
- 深色模式下可切换为浅色轮廓，例如 white 或 #bfc7cf
- 可用 prefers-contrast 媒体查询适配高对比环境
:focus {
outline-color: black;
outline-width: 3px;
}
}
保留默认行为并优雅增强
不要完全移除 outline，除非提供足够明显的替代样式。如果用 box-shadow 模拟，确保仍满足可访问性标准。
推荐做法是：只在 :focus-visible 状态下应用自定义 outline，避免鼠标用户看到多余轮廓。
:focus-visible {outline: 2px solid #0066cc;
outline-offset: 2px;
}
这样既优化了键盘用户的焦点反馈，又不影响鼠标操作的视觉简洁性。
基本上就这些。合理使用 outline 配合颜色和偏移，能让焦点样式既实用又美观，提升整体用户体验。
