不能直接移除 outline，因键盘用户依赖其定位焦点；应使用 outline 或 box-shadow 提供高对比、符合 wcag 2.1 的可见焦点指示，并适配暗色模式与无障碍偏好。
直接去掉 outline 不是好办法，尤其对可访问性有害；正确做法是用 outline 或 box-shadow 做清晰、高对比的焦点指示。
为什么不能直接 outline: none？
键盘用户（如 Tab 导航）依赖 outline 知道当前聚焦在哪。移除它等于让屏幕阅读器和键盘操作者“失明”。WCAG 2.1 明确要求可见焦点指示必须满足 3:1 对比度，且尺寸足够（推荐最小 2px 宽、包围元素）。
常见错误现象：input:focus { outline: none; } → 键盘导航时完全看不到焦点位置，测试工具（如 axe）会报 A11y 错误。
- 别用
outline: 0或outline: transparent—— 这些在多数浏览器里仍会渲染不可见 outline，可能干扰焦点管理 - 若真要隐藏默认 outline，必须提供同等或更强的替代样式
- 某些旧版 Safari 对
outline: none处理异常，导致 focus 状态丢失
用 outline 自定义焦点边框
保留 outline 语义，只改外观：颜色、宽度、样式、偏移（outline-offset）都可调，且不破坏布局（outline 不占空间）。
示例：
input:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
-
outline-offset控制 outline 与边框的距离，避免紧贴难辨；负值会让 outline 向内收缩（慎用，易被裁剪） - 避免纯色
outline在深色背景上失效 —— 检查对比度，必要时用outline-color: #fff+background: #007bff组合 - 不要设
outline-style: none后再用border替代 —— border 会改变盒模型尺寸，触发重排
用 box-shadow 替代 outline 的场景
当需要更灵活控制（如圆角阴影、多层效果）或兼容老版本 IE（IE8+ 支持 box-shadow，但不支持 outline-offset）时，box-shadow 是更可控的选择。
示例（模拟 focus ring）：
input:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
- 必须配
outline: none，否则 outline 和 shadow 共存，视觉混乱 - 用
rgba()控制透明度，避免遮挡文字或背景细节 - 注意移动端 Safari 默认给
input加-webkit-appearance: none才能让box-shadow正常生效 -
box-shadow会扩大渲染区域，极端情况下影响滚动性能（但单个 input 几乎无感）
聚焦样式要适配暗色模式和系统偏好
用户开启 prefers-reduced-motion 或 prefers-contrast: high 时，焦点样式需响应变化。
建议写法：
@media (prefers-contrast: high) {
input:focus {
outline: 3px solid currentColor;
}
}
@media (prefers-reduced-motion: reduce) {
input:focus {
transition: none;
}
}
- 别只写
color，用currentColor让 outline 自动匹配文本色，在暗/亮主题下都保有对比 - 动画类 focus 效果（如渐变 shadow）在
prefers-reduced-motion下应禁用，否则违反用户设置 - 部分安卓 WebView 对媒体查询支持不全，关键焦点样式仍需默认态兜底
真正麻烦的不是写几行 CSS，而是确保焦点始终「可感知、可预测、不打断操作流」——比如表单跳转时焦点自动落到下一个字段，或错误提示后焦点回到出错 input。这些不在 outline 范围内，但和它一样重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
