Focus Ring (:focus-visible) 焦点环 Focus Ring（:focus-visible） web
The keyboard-aware outline that identifies the active control
感知键盘操作的轮廓线，标识当前活动的控件
:focus-visible
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Focus outline焦点轮廓
outline“The blue line around the button after I press Tab” is the focus outline.
「按 Tab 后按钮周围那圈蓝线」就是焦点轮廓。
Prompt fragmentPrompt 片段a high-contrast CSS outline around the :focus-visible control
:focus-visible 控件周围一圈高对比的 CSS outline
-
2 Outline offset轮廓偏移
outline-offset“The little gap between the control and its focus line” is the outline offset.
「控件和焦点线之间那条小缝隙」就是轮廓偏移。
Prompt fragmentPrompt 片段a CSS outline-offset leaving a visible gap between the :focus-visible ring and the control edge
CSS outline-offset，在 :focus-visible 焦点环和控件边缘之间留出可见缝隙
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Style the keyboard focus ring with :focus-visible instead of suppressing the browser outline globally. Make it high contrast and clearly offset from the control; use :focus only for state that must apply regardless of whether focus came from keyboard or pointer.
用 :focus-visible 给键盘焦点环做样式，不要全局禁用浏览器默认轮廓。焦点环要高对比、与控件明显错开；:focus 只用于无论焦点来自键盘还是指针都必须生效的样式。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my focus ring (outline, :focus-visible). Rule out: a global outline:none killing keyboard navigation everywhere; :focus styling mouse clicks when :focus-visible was intended; the ring clipped by an overflow-hidden ancestor — use outline-offset or box-shadow inside; a box-shadow ring invisible against a same-color background; programmatic .focus() not showing a ring without focus-visible options. The symptom:
调试我的焦点环（outline、:focus-visible）。排查：全局 outline: none 把所有键盘导航焦点都干掉了；本意是 :focus-visible 却用了 :focus，鼠标点击也出现焦点环；焦点环被 overflow: hidden 的祖先裁掉——改用 outline-offset 或内侧 box-shadow；box-shadow 焦点环在同色背景上看不见；用 .focus() 编程聚焦时不显示焦点环，需要 focus-visible 相关选项。症状：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| CSS | :focus-visible | |
| CSS | :focus | |
| HTML | tabindex |