直接用 box-shadow 写 CSS 更可靠，因为 Bootstrap 5 的阴影类仅提供 4 档固定值，无法满足内阴影、多层、定向偏移等定制需求；自定义类如 .shadow-custom { box-shadow: 0 4px 12px rgba(0,0,0,.15); } 更灵活、不依赖构建流程且易维护。
为什么直接用 box-shadow 写 CSS 更可靠
Bootstrap 5 的 .shadow-sm 到 .shadow-lg 类只提供 4 档固定值，且全部基于 box-shadow 的预设参数（如 0 .125rem .25rem rgba(0,0,0,.075)）。一旦你需要深色背景下的内阴影、多层阴影、或特定方向偏移（比如仅底部投影），原生类就完全不够用了。
最稳妥的做法是自己写一个类，而不是试图覆盖 Bootstrap 的 shadow 变量或 hack 它的 Sass 编译流程——尤其当你只是偶尔需要一两个特殊效果时。
推荐直接在项目 CSS 文件（或 <style> 块）中添加：
.shadow-custom {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}这样既不依赖构建工具，也不影响其他组件样式。
如何避免自定义阴影被 Bootstrap 的 !important 覆盖
某些 Bootstrap 版本（尤其是旧版或第三方主题）会在 .shadow-* 类里加 !important。如果你发现自己的 .shadow-custom 不生效，大概率是 CSS 优先级问题。
解决方法很简单：
- 确保你的自定义 CSS 在 Bootstrap CSS 之后加载（检查
<link>或@import顺序） - 如果仍冲突，给类加一层选择器权重，比如：
.my-card .shadow-custom，或直接加!important（仅限紧急修复）：box-shadow: 0 4px 12px rgba(0,0,0,.15) !important; - 别用
[class*="shadow-"]这类通用属性选择器去覆盖，容易误伤
用 Sass 扩展 Bootstrap 的 $shadow 变量（适合长期维护项目）
如果你用的是 Bootstrap 源码（Sass 版本），并且多个地方都需要统一管理阴影值，可以修改 $shadows map：
$shadows: ( "sm": 0 .125rem .25rem rgba($black, .075), "md": 0 .5rem 1rem rgba($black, .15), "lg": 0 1rem 3rem rgba($black, .175), "xl": 0 2rem 6rem rgba($black, .2), "2xl": 0 4px 12px rgba($black, .15), // ← 新增 );
然后在 @include box-shadow() 或直接用 .shadow-2xl。注意：必须在 @import "bootstrap/scss/functions" 和 @import "bootstrap/scss/utilities" 之间注入该变量，否则不会被 util 工具类识别。
移动端阴影要小心性能和视觉干扰
在 iOS Safari 或低端 Android 上，复杂 box-shadow（尤其是大模糊半径 + 多层）可能触发重绘卡顿，也容易让浅色文字在阴影上变得难读。
实操建议：
- 避免在
position: fixed或频繁滚动的元素上用blur > 16px - 深色模式下，把
rgba(0,0,0,.15)改成rgba(0,0,0,.25)提升对比度 - 用
will-change: transform配合阴影动画时，务必测试真机表现，部分 WebView 会直接禁用硬件加速
真正麻烦的不是怎么加阴影，而是加完之后要不要删掉——很多“酷炫”阴影上线后才发现它在折叠菜单里挡住了图标，或者在表单输入框聚焦时让边框看起来像双线。先小范围试，再全局推。
