聚焦Focus
视觉效果与操作状态标出键盘当前正在操作的元素
用户按 Tab 切换或进入输入框时，元素会获得焦点。清楚的焦点样式让键盘用户知道自己在哪里；如果移除浏览器默认描边，必须提供同样明显的替代样式。
用 Tab 键走一遍：描边明显的那个，才知道自己走到哪了
什么时候用
什么时候不用
- outline: none 就完事：删了描边又不补，键盘用户彻底迷路outline: none
- 描边太淡：1px 浅灰，聚焦了和没聚焦一样保存
- 用 div 造假按钮：Tab 永远走不到，键盘和读屏用户被排除<div onclick>
- tabindex 乱排：焦点在页面上乱跳，比不能聚焦还晕② 姓名① 邮箱③ 电话
组成结构 · Anatomy
输入中…描边 2px+Tab → 下一个
1焦点元素Target当前拿到焦点的那个控件
2焦点描边Focus Ring告诉所有人“焦点在这儿”
3焦点顺序Tab OrderTab 键的行进路线，默认按 DOM 顺序
常见变体 · Variants
描边Outline
按钮
浏览器自带默认，别随便删
光晕Ring
输入框
品牌色外发光，更现代
背景高亮Background
菜单项
列表、菜单项聚焦时用
典型使用场景
键盘 Tab 浏览表单
完善资料
Tab ⇥ 按一下，焦点跳到下一个输入框
输入框聚焦输入
这个配色方案不错
聚焦输入：品牌色描边 + 光晕，一眼找到光标
屏幕阅读器导航
快捷键直达搜索框
🔍
主题切换
⌘K