:focus默认不发光是因为bootstrap 5用柔和的单层box-shadow（0 0 0 0.25rem rgba(13,110,253,0.25)）实现焦点高亮，非辉光效果；真正发光需多层box-shadow叠加、overflow:visible防裁剪，并确保样式加载顺序和选择器权重正确。
为什么 :focus 默认不发光？
Bootstrap 5 默认用 box-shadow 实现焦点高亮，但它是淡蓝色、细边框式阴影，不是“发光”效果。它被定义在 .form-control:focus 中，且带 !important，直接覆盖需更高优先级或重置原样式。
- 原生
:focus不自动发光，必须显式设置box-shadow（不能只靠outline） - Bootstrap 5 的
box-shadow是0 0 0 0.25rem rgba(13, 110, 253, 0.25)，柔和但不够“亮” - 如果用了
border: none或自定义border-radius，可能让阴影被裁剪，导致发光不完整
怎样写出真正发光的 :focus 样式？
关键不是加一层阴影，而是用多层 box-shadow 模拟辉光扩散，同时确保不被父容器裁剪：
- 给
.form-control加overflow: visible（否则圆角容器会剪掉外层阴影） - 使用至少两层
box-shadow：内层高斯模糊小值（0 0 4px），外层大而透明（0 0 16px） - 颜色推荐用
hsl(210, 100%, 65%)或rgba(100, 180, 255, 0.7)，比 Bootstrap 默认更亮更通透 - 必须加上
transition: box-shadow 0.2s ease，否则闪烁生硬
.form-control:focus {
outline: none;
overflow: visible;
box-shadow:
0 0 4px hsl(210, 100%, 65%),
0 0 16px rgba(100, 180, 255, 0.7);
transition: box-shadow 0.2s ease;
}
为什么加了样式却没生效？常见拦截点
-
!important 冲突：Bootstrap 的 .form-control:focus 带 !important，你的规则必须写在 Bootstrap CSS 之后，或增加选择器权重（比如 .my-form .form-control:focus）
- 表单控件类型不匹配：Bootstrap 的
textarea、select、input[type="file"] 不继承 .form-control 的全部焦点逻辑，需单独写 textarea:focus 等
- 自定义
border 覆盖了阴影视觉：如果设了 border: 2px solid #eee，发光会被“压暗”，建议改用 border: 2px solid transparent，靠阴影撑出视觉厚度
- 在 Modal 或 Popover 中失效：这些组件常设
overflow: hidden，需给父容器加 overflow: visible 或提升层级（z-index）
移动端 Safari 和旧版 Chrome 的兼容处理
!important 冲突：Bootstrap 的 .form-control:focus 带 !important，你的规则必须写在 Bootstrap CSS 之后，或增加选择器权重（比如 .my-form .form-control:focus）textarea、select、input[type="file"] 不继承 .form-control 的全部焦点逻辑，需单独写 textarea:focus 等border 覆盖了阴影视觉：如果设了 border: 2px solid #eee，发光会被“压暗”，建议改用 border: 2px solid transparent，靠阴影撑出视觉厚度overflow: hidden，需给父容器加 overflow: visible 或提升层级（z-index）iOS Safari 对 box-shadow 的模糊渲染偏弱，尤其多层叠加时容易糊成一团；老版 Chrome（rgba() 在 box-shadow 中的支持不稳定：
- 避免用超过三层
box-shadow - 不要用
hsla()透明度，改用rgba()（Safari 对前者支持更差） - 测试时打开 Safari 的「开发者 → 开发菜单 → 显示 Web 检查器」，手动删掉
box-shadow看是否恢复默认焦点，确认是样式问题而非 JS 干预
发光效果真正起作用的地方，往往不在代码第一行，而在你是否记得给父容器留出“呼吸空间”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
