点击按钮没发光是因为Bootstrap 5.3默认移除了:active/:focus的box-shadow；应改用input:checked + label.btn绑定持久状态，并复用$primary等语义色变量实现稳定外发光。
为什么点击按钮没发光？Bootstrap 5.3 默认关掉了
bootstrap 5.3 主动移除了 :active 和 :focus 状态下的 box-shadow，目的是减少默认样式干扰、提升可访问性控制权。所以你点按钮，它不“亮”不是你写错了，是框架故意的——尤其在 btn-check + label.btn 这类自定义单选按钮场景下，:active 一闪就消失，根本留不住视觉反馈。
用 input:checked + label.btn 替代 :active
要让“已选中”的按钮稳定发光，必须绑定到持久状态，而不是瞬时动作。原生 radio 的 :checked 是唯一可靠信号，配合相邻兄弟选择器就能精准命中对应按钮：
-
input[type="radio"]#buffer-1:checked + label.btn—— 只影响这个 ID 对应的按钮 - 加
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25)，和 Bootstrap 官方.focus-ring逻辑一致：无偏移、无模糊、纯扩展外发光 - 别用
outline：它不占布局但颜色难协调，且可能被浏览器强制覆盖 - 别直接改
border：会触发重排，按钮尺寸微变，导致布局抖动（尤其在紧凑网格中）
发光颜色怎么配才不突兀？
别硬套品牌色填满，优先复用 Bootstrap 已有的语义色变量值，保持系统一致性：
- 主按钮激活态 →
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25)（$primary透明度 25%） - 危险按钮 →
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25)（$danger） - 如果用了 CSS 自定义属性，可写成
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary), transparent 75%)
动态激活（比如模态框里根据数据自动高亮）怎么办？
:checked 是 HTML 层面的状态，JS 控制时只需操作 input 的 checked 属性，CSS 自动响应，无需手动 toggle class：
- JS 设置：
document.getElementById('buffer-1').checked = true - Vue/React 中绑定
v-model或value即可，只要 input 真实被选中，发光效果立即生效 - 注意：不要给
label加tabindex或手动focus()，这会干扰屏幕阅读器对btn-check的语义识别
box-shadow，而是死磕 :active 或 :focus，忘了 Bootstrap 5.3 的交互模型已经转向「状态驱动」而非「事件驱动」——:checked 才是那个稳稳发光的锚点。
