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.
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:
# Focus Ring (:focus-visible) · 焦点环 Focus Ring（:focus-visible）
UI reference — https://K3tty5555.github.io/LearnUI_PM/web/focus-ring-web/
**The keyboard-aware outline that identifies the active control**
感知键盘操作的轮廓线，标识当前活动的控件
**Also called / 也叫:** focus indicator, keyboard focus outline, focus halo / 焦点指示器、键盘焦点轮廓、焦点光晕
## Anatomy — every part, named / 解剖
1. **Focus outline · 焦点轮廓** (`outline`)
“The blue line around the button after I press Tab” is the focus outline.
「按 Tab 后按钮周围那圈蓝线」就是焦点轮廓。
Prompt fragment: a high-contrast CSS outline around the :focus-visible control
2. **Outline offset · 轮廓偏移** (`outline-offset`)
“The little gap between the control and its focus line” is the outline offset.
「控件和焦点线之间那条小缝隙」就是轮廓偏移。
Prompt fragment: a CSS outline-offset leaving a visible gap between the :focus-visible ring and the control edge
## Prompt / 提示词
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 / 调试提示词
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 / 代码里叫什么
- **CSS** `:focus-visible`
- **CSS** `:focus`
- **HTML** `tabindex`
