调感觉
焦点环
Focus Ring
「tab 到按钮时那圈蓝边」「键盘操作的高亮框」「聚焦外圈」「输入框选中时那圈边」
LIVE DEMO真实可交互，动手试试
- 英文名
- Focus Ring
- 别名 · 俗称
- 键盘高亮边框聚焦轮廓focus-visible 外圈焦点描边
- Web 叫法
- Focus Ring / :focus-visible
- 大白话定义
- 键盘或辅助技术把焦点移到某个控件上时，外面出现的一圈高亮边框，用来告诉你现在操作到哪了。
- 部位拆解
- 焦点状态 Focus元素当前正接收键盘输入
- 高亮轮廓 Ring通常在边框外额外画一圈
- 显示条件 Focus Visible一般键盘聚焦时显示，鼠标点击时可不显示
提示词已按当前平台组织好，复制粘贴给 AI 即可
Web
为按钮和输入框统一加 Focus Ring：键盘 Tab 聚焦时显示 2px 主色外环，鼠标点击不强行出现
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的焦点环（Focus Ring）。逐一排除：只去掉 outline 没补新的焦点样式；焦点环颜色和背景太接近；用了 :focus 而不是 :focus-visible，鼠标点击也一直亮；圆角和外环不匹配，边角被切掉。症状是：