bootstrap 5 的焦点光圈由两层 box-shadow 实现，非 border-color；需用完整四值语法覆盖，如 box-shadow: 0 0 0 0.25rem rgba(220,53,69,0.25)；深色模式需单独适配颜色与扩散值，并注意父容器裁剪问题。
为什么直接改 border-color 没用
Bootstrap 5 的焦点光圈根本不是边框，而是两层 box-shadow：一层是带颜色的外发光（如 rgba(13, 110, 253, 0.25)），另一层是透明补偿（0 0 0 0.25rem transparent）。只写 border-color: #dc3545，光晕还是蓝的——你看到的“边框变色”只是错觉。
覆盖 box-shadow 必须写全四值语法
不能只改颜色，必须保留完整的阴影结构，否则会破坏视觉对齐或让边框看起来“加粗”。正确写法要包含偏移、模糊、扩散半径和颜色：
-
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25)✅（完整四值） -
box-shadow: rgba(220, 53, 69, 0.25)❌（无效，浏览器忽略） -
box-shadow: 0 0 0 0.25rem #dc3545⚠️（缺少 alpha，无透明度，光晕过实）
推荐始终用 rgba()，方便控制透光感；扩散值 0.25rem 别删，它是光晕“浮起来”的关键。
选择器权重不够？加 !important 几乎不可避免
Bootstrap 原生规则是 .form-control:focus { box-shadow: ... }，权重已经很高。你的自定义 CSS 若加载在 Bootstrap 之前，或选择器太泛（比如只写 input:focus），就会被覆盖。
- 确保自定义 CSS 在
bootstrap.min.css之后加载 - 用更具体的选择器，例如
.my-form .form-control:focus或input.form-control:focus - 加上
!important是最省事且可靠的兜底方式：box-shadow: 0 0 0 0.25rem rgba(72, 119, 255, 0.3) !important
别怕 !important ——这里它不是坏习惯，而是对抗框架高优先级规则的合理手段。
深色模式下光晕发灰？不是颜色错了，是没适配
浅色主题下的 rgba(13, 110, 253, 0.25) 在深色背景上会显得浑浊、不突出。这不是 bug，是透明度与背景对比不足导致的视觉衰减。
- 深色模式需单独重写：
@media (prefers-color-scheme: dark) - 提高颜色亮度，比如改用
rgba(139, 195, 74, 0.3)（亮绿）或rgba(100, 200, 255, 0.35) - 可略微加大扩散值（如
0.3rem），增强分离感 - 不要依赖
.dark类自动切换——Bootstrap 5.3+ 才原生支持，老项目得手动处理
真正容易被忽略的是：光晕是否被父容器裁剪。比如在 .navbar 里，overflow: hidden 或低 z-index 会直接切掉 box-shadow 的扩散部分——这时调颜色没用，得给输入框加 position: relative; z-index: 2。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
