应使用 :focus-visible 为主、:focus 为辅的双规则覆盖 Bootstrap 默认聚焦样式，务必添加 outline: none 并采用带透明度的主色 box-shadow（如 rgba(13,110,253,0.25)），扩散值≥0.25rem，同时兼顾验证状态类冲突、过渡动画性能及高对比度模式可访问性。
用 :focus + box-shadow 实现基础发光效果
Bootstrap 默认的 .form-control 在聚焦时已有浅蓝边框，但不够突出。直接覆盖其 :focus 样式即可增强视觉反馈。关键不是加新类，而是提高选择器权重并禁用默认 outline。
常见错误是只写 box-shadow 却没清除 outline: none，导致双轮廓或浏览器默认焦点环干扰；另一坑是阴影颜色用纯白或纯黑，在深色/浅色主题下失效。
- 必须加上
outline: 0或outline: none，否则 Chrome/Firefox 仍会叠加原生焦点环 - 推荐用
rgba(0, 123, 255, 0.25)这类带透明度的 Bootstrap 主色变体，兼顾可访问性与柔和感 - 阴影扩散值建议 ≥
0.2rem，太小看不出“发光”，太大则模糊失焦
.form-control:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
适配 Bootstrap 5 的 :focus-visible 更安全写法
Bootstrap 5 默认启用 :focus-visible 逻辑（仅键盘 Tab 触发聚焦时生效），若强行用 :focus 覆盖，可能让鼠标点击输入框时失去焦点样式，影响可访问性。
正确做法是优先增强 :focus-visible，再用 :focus 作为降级兜底 —— 这样既保键盘用户，也不丢鼠标用户。
- 不要单独写
.form-control:focus，改用.form-control:focus-visible主力控制 - 若需兼容旧版 Bootstrap 4 或某些不支持
:focus-visible的环境，再追加.form-control:focus:not(:focus-visible)修正 - 注意：Safari 目前对
:focus-visible支持有限，实际项目中建议同时保留:focus规则
.form-control:focus-visible {
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-control:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
避免与 .is-invalid / .is-valid 冲突
当输入框同时有验证状态类（如 .is-invalid）和聚焦态时，Bootstrap 5 默认会让 box-shadow 变为红色/绿色，覆盖你自定义的发光色 —— 这不是 bug，是设计行为。
若希望“聚焦+校验失败”时仍显示你的发光效果，必须提高选择器特异性，或重置验证类的阴影规则。
- 最简方案：给聚焦发光加
!important（仅限小项目，不推荐长期维护） - 更稳妥方式：用组合选择器，例如
.form-control:focus.is-invalid单独定义阴影 - 注意
.is-invalid类内部还设置了border-color，若只改阴影不调边框，视觉可能割裂
.form-control:focus.is-invalid,
.form-control:focus.is-valid {
box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25) !important;
}
性能与移动端注意事项
发光本质是 box-shadow 动画，但 Bootstrap 默认没做过渡，直接硬切会显得生硬。加 transition 能提升体验，但要注意属性范围。
别写 transition: all .2s —— 它会触发重排，尤其在低端安卓机上造成卡顿；也别对 box-shadow 使用 cubic-bezier 复杂缓动，意义不大。
- 只过渡
box-shadow和border-color，其他一律不参与动画 - 时间控制在
.15s–.2s，过长显得迟钝，过短像闪烁 - iOS Safari 对
box-shadow动画渲染有延迟，必要时可加transform: translateZ(0)强制 GPU 加速（仅当实测卡顿时启用）
.form-control {
transition: box-shadow .15s ease-in-out, border-color .15s ease-in-out;
}
真正容易被忽略的是：发光效果在高对比度模式（Windows 系统设置）下会被强制覆盖为单色粗边框，此时 box-shadow 完全失效。如果项目需 WCAG AA 合规，不能只依赖发光，得配合 border-width 增加、background-color 微调等多重信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
