bootstrap 5 的 offcanvas 遮罩层默认无阴影，因其仅设 rgba(0,0,0,0.5) 背景而未加 box-shadow；需通过 .offcanvas-backdrop 类自定义 box-shadow 并注意 z-index、过渡一致性及 body.offcanvas-open 条件控制。
抽屉菜单遮罩层为什么没阴影？
Bootstrap 5 默认的 offcanvas 组件本身不带遮罩阴影，它只提供一个半透明黑色背景（background-color: rgba(0, 0, 0, 0.5)），但没有 box-shadow。如果你看到遮罩“平平的”、缺乏层次感，不是你漏写了什么，是 Bootstrap 故意没加——它把视觉控制权交给了你。
如何给 offcanvas 遮罩层加 box-shadow？
关键在于定位到遮罩元素（Backdrop）并覆盖其样式。Bootstrap 5 的 offcanvas 遮罩是独立 DOM 节点，类名为 .offcanvas-backdrop，且在 body 最末尾动态插入。不能靠修改 .offcanvas 本体，必须直接作用于这个 backdrop 元素：
.offcanvas-backdrop {
box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
}
注意几点：
- 必须确保该 CSS 规则权重足够高（比如不被 Bootstrap 的
!important覆盖），建议放在自定义 CSS 文件末尾，或用body .offcanvas-backdrop提升优先级 - 阴影值别设太大，否则会盖住 offcanvas 内容边缘；
24px是较稳妥的起始值 - 如果用了
data-bs-backdrop="static"，遮罩仍存在，样式同样生效
移动端下阴影突然消失？检查 backdrop 的 z-index
常见现象：PC 上阴影正常，手机上却没了——其实是阴影被其他元素（如 fixed 导航栏、Toast、Modal）压在了下面。因为 .offcanvas-backdrop 默认 z-index: 1040，而 Bootstrap 的 .navbar-fixed-top 或某些第三方组件可能设得更高。
解决办法是显式提升遮罩层级：
.offcanvas-backdrop {
z-index: 1055; /* 高于 navbar（1030）、modal-backdrop（1050） */
box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
}
顺带一提：z-index 值必须大于目标遮罩对象的父容器层级，否则阴影即使渲染了也看不见。
想让阴影只出现在抽屉打开时？不用 JS 监听
很多人想用 JS 在 show.bs.offcanvas 里加 class，其实没必要。Bootstrap 5 会在 body 上自动添加 offcanvas-open 类，且仅当有任意 offcanvas 打开时存在。直接利用它做条件样式即可：
body.offcanvas-open .offcanvas-backdrop {
box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
}
这样既干净又无性能开销。不过要注意：多个 offcanvas 同时打开时，该规则依然只匹配一次，不影响效果。
真正容易被忽略的是 backdrop 的过渡动画和阴影同步问题——如果你改了 transition 时间但没同步更新 box-shadow 的缓动函数，阴影会出现“跳变”。建议统一用 transition: all 0.3s ease-in-out 控制 backdrop 全局变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
