焦点状态
Focus State
交互模式也叫：focus、聚焦样式、焦点环、Focus Ring
一句话：元素被选中、准备接收输入时的样式，比如点击输入框后边框变深，按 Tab 键时按钮外出现描边。
详细解释
焦点表示「现在键盘输入会作用在这里」。点击输入框，或按 Tab 键在页面元素间切换时，获得焦点的元素要有明显的样式，通常是一圈描边（焦点环）或边框变色，用 CSS 的 :focus 或 :focus-visible 编写。
很多人嫌浏览器默认的焦点描边难看，直接写 outline: none 去掉，这会让键盘用户完全不知道自己在哪，是很常见的无障碍问题。正确做法是换成和设计风格一致的焦点样式，而不是删掉。:focus-visible 只在键盘操作时显示，鼠标点击时不显示，可以兼顾美观。
焦点和悬停不是一回事：悬停是鼠标经过，焦点是选中待输入，两者可以同时存在。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
所有输入框、按钮和链接都要有清晰的焦点样式：用 :focus-visible 显示 2px 深灰色描边，与元素间隔 2px，不要直接去掉 outline；输入框获得焦点时边框变深；按 Tab 键切换的顺序要和视觉顺序一致。