bootstrap 5 表单输入框:focus时默认有两层box-shadow：0 0 0 0.25rem rgba(13,110,253,0.25)和0 0 0 0.25rem transparent，用于实现聚焦发光效果并补偿border-width。
Bootstrap 5 表单输入框的默认 box-shadow 是哪几层？
Bootstrap 5 的 .form-control 在聚焦（:focus）时，默认使用了两层 box-shadow：一层是浅蓝主色的高亮阴影（0 0 0 0.25rem rgba(13, 110, 253, 0.25)），另一层是透明边框补偿（0 0 0 0.25rem transparent）。这两层叠加，配合 border-color 变化，共同构成“聚焦发光”效果。
直接覆盖 box-shadow 时若只写一层值，容易丢失视觉层次或导致边框“变粗”——因为 Bootstrap 同时还设置了 border-width: 0.25rem，而透明那层阴影正是用来抵消它在非聚焦态下的视觉突兀感。
- 必须用完整四值语法重写整个
box-shadow，不能只改颜色 - 建议保留相同偏移、模糊和扩散值（即
0 0 0 0.25rem），否则可能破坏对齐或触发重排 - 如果去掉透明层，又没同步调低
border-width，聚焦时会看到明显“加粗”
如何用 CSS 覆盖 .form-control:focus 的 box-shadow？
最稳妥的方式是提高选择器权重，并完整声明新阴影。推荐在自定义 CSS 文件末尾添加：
.form-control:focus {
box-shadow: 0 0 0 0.25rem rgba(255, 99, 132, 0.25); /* 粉红示例 */
border-color: rgb(255, 99, 132);
}
注意两点：
- 不要用
!important—— Bootstrap 5 的原生规则已带:focus伪类，只需确保你的 CSS 加载在 Bootstrap 之后即可生效 - 如果用了 Sass/SCSS，更推荐通过变量覆盖：
$form-control-focus-box-shadow和$form-control-focus-border-color，避免硬编码颜色值 - 对
.form-select、.form-check-input等其他表单控件，需单独处理，它们的聚焦样式不共享同一套变量
为什么改了 box-shadow 还是没生效？常见失效原因
典型失效不是语法错，而是被更高优先级规则压制或状态未命中：
- 检查是否误写了
.form-control:focus-within或.form-control:active—— 实际起效的是:focus - 确认元素确实能获得焦点：比如
disabled或readonly状态下:focus不会触发 - 某些 UI 库（如 Bootstrap Vue / React-Bootstrap）会封装组件并移除原生 class，此时
.form-control可能根本没被渲染出来 - DevTools 中查看 computed 样式，确认
box-shadow是否被标记为“strikethrough”，再点开来源定位冲突规则
深色模式下需要额外处理吗？
需要。Bootstrap 5 原生不自动适配深色模式下的聚焦阴影对比度。如果你用 @media (prefers-color-scheme: dark) 切换主题，记得同步调整：
@media (prefers-color-scheme: dark) {
.form-control:focus {
box-shadow: 0 0 0 0.25rem rgba(106, 13, 173, 0.3);
border-color: rgb(106, 13, 173);
}
}
重点在于：深色背景上，同样 alpha 值的浅色阴影（如 rgba(13,110,253,0.25)）几乎不可见。一般需提高 color 值饱和度或略微增加 alpha（但别超过 0.4，否则像贴了层膜）。
真正容易被忽略的是：很多项目只改了 background 和 color，却忘了表单控件的交互反馈也得随背景动态调整 —— 阴影不是装饰，是可访问性线索。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
