Bootstrap v5.3+ 中 :focus-visible 无反应，因默认仅键盘触发且 :focus 被 outline: 0 清除，需同时定义 .btn:focus（兜底透明边框）和 .btn:focus-visible（后置覆盖），并处理兼容性与深色模式对比度问题。
为什么直接写 :focus-visible 没反应
bootstrap v5.3+ 默认只对键盘聚焦（比如 tab 切换）启用 :focus-visible，鼠标点击后触发的是 :focus，但 bootstrap 已用 outline: 0 清掉它，同时又没给 :focus-visible 补上视觉反馈——结果就是点击无边框、tab 也无边框，看起来“样式失效”了。
常见错误是只写 .btn:focus-visible { outline: 2px solid #0d6efd; }，却漏掉 .btn:focus 的基础兜底。浏览器不支持 :focus-visible 时（如旧版 Safari），这个选择器会被整条忽略，:focus 又没定义，按钮就彻底“失焦”。
- 必须同时声明
.btn:focus和.btn:focus-visible，且:focus-visible要写在:focus后面，靠层叠覆盖 - Safari 15.4 之前、iOS 15.4 之前的 WebView 不支持
:focus-visible，需 fallback（比如加outline: 2px solid transparent占位） - 检查是否被 normalize.css 或其他 CSS 重置库静默清除了
:focus-visible的默认行为
:focus-visible 和 :focus 怎么配才不冲突
目标不是“二选一”，而是分场景响应：:focus 提供基础焦点反馈（兼容老浏览器 + 防布局跳动），:focus-visible 在支持时叠加更精准的键盘指示。关键在于顺序和占位逻辑。
-
.btn:focus { outline: 2px solid transparent; }—— 兜底，避免清除 outline 后重排 -
.btn:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }—— 支持时覆盖透明 outline - 别写
.btn:focus:not(:focus-visible)去隐藏鼠标焦点：这会把所有鼠标点击后的 focus 都干掉，包括 JS 主动调用button.focus()的场景 - 如果要用
box-shadow替代 outline（比如圆角按钮），统一用box-shadow实现两套状态，别混用 outline + shadow
修改按钮焦点阴影该动哪个变量或选择器
Bootstrap v5+ 的表单控件（包括 .btn）焦点阴影由 CSS 变量 --bs-btn-focus-box-shadow 控制，但该变量**仅作用于 :focus-visible 状态**，不是 :focus。直接改 .btn:focus 的 box-shadow 很可能被 Bootstrap 原生规则覆盖。
- 安全做法：重写
.btn:focus-visible并注入新变量值，例如：.btn:focus-visible { --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5); } - 若需鼠标点击也出阴影，可额外加
.btn:focus:not(:focus-visible)规则，但要明确知道这是“降级体验”，且必须确保它不会干扰键盘用户的:focus-visible样式 - 禁用自动聚焦（如移除
autofocus、避免button.focus()）后，:focus-visible就完全不触发——此时阴影只能靠 JS 手动加 class 实现
深色模式下 :focus-visible 边框太淡怎么办
Bootstrap 默认的 rgba(13, 110, 253, 0.25) 在暗背景上对比度不足，尤其 iOS Safari 的 focus ring 渲染偏细，容易看不见。这不是 alpha 值设错，而是颜色本身在深色上下文里失效。
- 别只调高 alpha（比如到 0.5），先换色：用亮青
rgba(16, 185, 129, 0.4)或明黄rgba(251, 146, 60, 0.4)更可靠 - 深色模式检测应走
@media (prefers-color-scheme: dark)，而不是靠 JS 切类名——后者有闪动风险，且无法覆盖用户系统级设置 - 如果用了 Sass，优先通过
$btn-focus-box-shadow变量重定义，它会自动编译进:focus-visible规则中，比手写 CSS 更稳 - 注意
outline-offset在深色模式下建议保持 ≥2px，否则边框易被圆角裁切，视觉上“断开”
真正难处理的不是怎么写 :focus-visible，而是它和 :focus、autofocus、tabindex、甚至屏幕阅读器的交互策略耦合太深。一个按钮能不能被键盘用户感知，往往取决于你有没有在 :focus 里留够“呼吸空间”，而不是只盯着 :focus-visible 能不能亮起来。
