bootstrap 5 默认不提供 shadow-color 工具类，所有阴影类使用硬编码 rgba(0,0,0,.075)，需手动覆盖 box-shadow 实现颜色定制，并注意深色模式适配与表单聚焦阴影的双层结构。
Bootstrap 5 默认不提供 shadow-color 工具类
Bootstrap 5 的 shadow-sm、shadow、shadow-lg 等类全部使用硬编码的 rgba(0,0,0,.075) 类似值，没有颜色变量抽象，也没有 shadow-color 这类工具类。想改阴影颜色，必须自己写 CSS —— 别在 class 名里找答案。
直接覆盖 box-shadow 是最稳的做法
用自定义 class 替代或补充原生类，例如：
.shadow-primary {
box-shadow: 0 0.125rem 0.5rem rgba(13, 110, 237, 0.2);
}
- 别只改颜色而漏掉偏移/模糊参数，否则会丢失层次感（比如只剩发光圈）
- 深色背景上用浅色阴影时，透明度要调低（
0.06比0.1更安全），否则像糊了一层灰 - 如果和
.shadow同时加在元素上，后声明的会完全覆盖前一个 —— Bootstrap 不支持“叠加”阴影类 - 移动端真机测试时注意 iOS Safari 渲染 rgba 透明度略保守，devtools 里看着 OK 不代表实际显示一致
深色模式下必须手动适配 shadow 颜色
Bootstrap 5.3+ 虽支持 data-bs-theme="dark"，但原生 shadow- 类仍用 rgba(0,0,0,...)，在黑底上几乎不可见。不能依赖自动切换。
- 用 CSS 自定义属性解耦颜色：定义
--bs-shadow-color: rgba(0,0,0,0.08)，再在[data-bs-theme="dark"]下重设为rgba(255,255,255,0.06) - 避免只靠
@media (prefers-color-scheme: dark)，它在部分安卓 WebView 和旧版 Safari 中不触发；data-bs-theme才是 Bootstrap 官方路径 - 如果你用 Sass，可扩写
$shadowsmap 并注入语义化变量，但最终仍需在 CSS 中显式引用var(--bs-shadow-color)，不是自动替换
表单控件:focus 阴影颜色修改要小心两层结构
Bootstrap 表单输入框（如 .form-control）聚焦时默认有两层 box-shadow：0 0 0 0.25rem rgba(13,110,253,0.25) + 0 0 0 0.25rem transparent。后者用于视觉补偿 border 宽度。
- 只覆盖第一层而忽略第二层，会导致聚焦时边框“变粗”或出现双影错位
- 正确做法是完整重写两层，例如：
box-shadow: 0 0 0 0.25rem rgba(255,99,132,0.25), 0 0 0 0.25rem transparent - 别用
!important硬顶 —— 只要确保你的 CSS 在 Bootstrap 之后加载，权重就足够 - 检查 DevTools 的 Computed 标签页，确认
box-shadow没被划掉；若被划掉，点开来源看是哪条规则赢了
box-shadow，而是得同时盯住三件事：颜色语义是否统一、深色模式是否真生效、表单聚焦反馈是否没崩。漏掉任意一环，用户在暗光环境或点击输入框时就会觉得“不对劲”，但又说不清哪里出问题。
