Bootstrap 5 中需通过重写 input:focus 的 box-shadow 第三个值（扩散半径）来修改光晕粗细，如 .form-control:focus { box-shadow: 0 0 0 0.15rem rgba(13,110,253,0.25) !important; }，并注意 border-color 协调、响应式适配及暗色模式兼容。
Bootstrap 5 中如何覆盖 box-shadow 修改 input:focus 光晕粗细
bootstrap 5 默认用 box-shadow 实现 focus 状态的蓝色光晕（outline），它不是传统 outline，所以不能靠 outline-width 直接调。真正起作用的是 box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) —— 其中 0.25rem 就是光晕“粗细”，也就是外阴影的扩散半径。
要改粗细，必须重写这个 box-shadow 值。常见错误是只改 outline 或试图用 border 模拟，结果无效或破坏响应式行为。
- 直接在 CSS 中覆盖
:focus状态，优先级需高于 Bootstrap 默认样式（建议加!important或使用更具体的选择器，如.form-control:focus） - 保持原有颜色和透明度，只调整第三个长度值（即扩散半径），例如改成
0.125rem（更细）或0.375rem（更粗） - 注意同时设置
border-color，否则光晕可能被默认边框遮挡；Bootstrap 5 的 focus 边框色会自动变深，你若覆盖了box-shadow却没动border-color，视觉会不协调
为什么用 !important 很可能绕不开
Bootstrap 5 的原始规则是：.form-control:focus 带有较高的特异性，且其 box-shadow 声明在 CSS 文件中靠后位置。单纯写 .form-control:focus { box-shadow: ... } 容易被覆盖。
实操建议：
- 用
.form-control:focus { box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25) !important; }最快生效 - 如果项目用 Sass，推荐在自定义变量后重写
$form-control-focus-box-shadow，再重新编译 —— 这样更干净，但需构建流程支持 - 避免用内联 style 或 JS 动态设
style.boxShadow，会导致状态管理混乱，且无法响应 dark mode 切换
兼容性与响应式注意事项
光晕粗细修改后，在小屏设备上可能显得过重或过轻，尤其搭配 form-control-lg 或 form-control-sm 类时，Bootstrap 并不会自动缩放 box-shadow 扩散值。
- 若需响应式适配，可用媒体查询单独调整：
@media (max-width: 576px) { .form-control:focus { box-shadow: 0 0 0 0.1rem ... } } - 暗色模式下，Bootstrap 5 通过
data-bs-theme="dark"切换，其 focus 光晕色为rgba(108, 117, 125, 0.25)，你若硬编码颜色值，会丢失暗色适配 —— 推荐保留原rgba(...)结构，只动扩散半径 - 不要删掉
box-shadow的第一个0 0（水平/垂直偏移），否则光晕会偏移，失去“居中发光”效果
验证是否生效的快速检查点
改完别急着刷新页面，先打开开发者工具检查 computed 样式里 box-shadow 是否已被覆盖，以及是否仍含 rgba 通道（透明度影响柔和度）。
- 点击 input 后，在 Elements 面板里选中该元素，看
:focus规则是否命中，box-shadow值是否为你设定的 - 如果光晕“断开”或呈矩形毛边，说明
border-radius不匹配 —— Bootstrap 5 的.form-control默认是0.375rem，你的box-shadow扩散值不应远超该值，否则圆角衔接会生硬 - 在 Firefox 中偶尔出现渲染延迟，可加
will-change: box-shadow强制硬件加速（仅必要时）
box-shadow 参数，但容易卡在优先级、响应式、暗色模式三个隐性环节。最稳的路径：用 !important 覆盖 + 保持原 rgba 颜色结构 + 核对 border-radius 匹配度。
