bootstrap按钮:focus默认内阴影需改为外发光，应覆盖.box-shadow为0 0 0 0.25rem rgba(...)并移除inset；同时需统一处理.btn:focus、:active:focus、.active:focus、.focus等所有焦点状态，添加outline:none，并结合:focus-visible实现键盘聚焦高亮、鼠标点击无闪烁。
Bootstrap按钮:focus默认是内阴影，怎么改成外发光？
Bootstrap 5 的 .btn:focus 默认用的是 box-shadow: inset 0 0 0 0.25rem rgba(...)，本质是「内发光」，在深色背景或带边框的按钮上几乎不可见。这不是 bug，是设计妥协——它保留了可访问性所需的轮廓，但牺牲了视觉强度。
要真正实现清晰、向外扩散的「外发光」效果，必须显式覆盖：.btn:focus 的 box-shadow，且去掉 inset 关键字：
.btn:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
- 别只改颜色——
0 0 0 0.25rem这段参数决定「外扩半径」，缩到0.15rem会变细弱，放大到0.3rem可能模糊失真 - 如果按钮本身有
border，建议同步调高box-shadow的模糊值（如0 0 0.3rem 0.25rem），否则光晕会紧贴边框显得局促 - Chrome 89+ 对
outline-style: auto的渲染不响应outline: none，所以单靠清 outline 无效；必须动box-shadow
为什么只写.btn:focus { box-shadow: ... } 还是闪一下蓝边？
因为焦点状态不是单一触发路径：鼠标点击松手前一帧触发 .btn:active:focus，toggle 按钮激活时走 .btn.active:focus，JS 动态加 class 时可能是 .btn.focus。漏掉任一，就会在特定操作下「闪一下」原生蓝边。
必须一次性覆盖全部组合：
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
outline: none;
}
-
outline: none必须和box-shadow同时出现，否则旧版 Firefox 会 fallback 显示原生虚线框 - Bootstrap 4 及更早版本 JS 插件（如 dropdown、collapse）依赖
.focus类，不覆盖会导致组件焦点反馈失效 - 别用
outline: 0—— Safari 下可能残留异常渲染，一律用outline: none
如何兼顾键盘用户和鼠标用户，避免双环或无环？
直接全局禁用 outline 或 box-shadow 会让键盘 Tab 用户彻底失去焦点感知，违反 WCAG 2.1 AA。稳妥做法是「区分交互来源」：
.btn:focus:not(:focus-visible) {
box-shadow: none;
}
.btn:focus-visible {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
-
:focus-visible是现代浏览器识别「键盘聚焦」的关键伪类，鼠标点击后不会触发，从而避免「点一下就亮、再点一下又灭」的闪烁 - iOS Safari 15.4 之前不支持
:focus-visible，所以必须双保险：先设.btn:focus为外发光，再用:not(:focus-visible)拦截鼠标路径 - 别漏掉
.form-control:focus、.custom-select:focus等其他可聚焦元素——按钮不是孤岛，体验割裂比没效果更伤
自定义 ring 时容易忽略的容器与兼容性陷阱
即使 CSS 写对了，也可能看不到效果，问题常出在容器层或渲染限制：
-
.btn-group > .btn选择器会强制border-radius: 0，导致外发光被裁切——需额外重置：.btn-group > .btn:focus { border-radius: 0.375rem; } - 父容器设了
overflow: hidden（比如卡片、模态框），box-shadow会被直接剪掉，得给父级加overflow: visible或留足 padding - 移动端 Safari 对
:focus支持不稳定，尤其在软键盘弹出后，建议补一句：.btn:focus-visible, .btn:focus双声明 - 如果用了 Tailwind 的
@tailwindcss/forms插件，它的焦点样式可能覆盖 Bootstrap，需确认加载顺序或在@layer base中统一接管
真正难的不是写出那几行 CSS，而是确保任意设备、任意交互方式（Tab、鼠标、触屏、语音）下，焦点始终可定位、可预测、不突兀——这点上线前最容易跳过，但无障碍审计时基本是必查项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
