最有效方法是直接修改 .dropdown-menu 的 box-shadow，需用多层值模拟景深、适配深色模式、避免 overflow: hidden 裁剪，并确保 transition 和 display 状态正确。
直接改 .dropdown-menu 的 box-shadow 最有效
Bootstrap 5 默认的 .dropdown-menu 没有阴影，.shadow-sm 等工具类也不作用于它——因为这些类只对块级容器生效，而下拉菜单默认是 position: absolute 且无预设阴影。想加投影深度，必须手动写 box-shadow，且必须加在 .dropdown-menu 上，不是父容器或触发按钮。
- 别用
!important覆盖 Bootstrap 内联样式（Popper 会动态写style），而是提高选择器权重：比如用.dropdown-menu.show或[data-popper-placement] .dropdown-menu.show - 移动端慎用大模糊值（如
blur: 24px），文字边缘容易发虚，建议最大用到12px - 如果菜单有圆角（
border-radius），box-shadow的模糊半径至少等于或略大于圆角值，否则阴影边缘生硬
多层 box-shadow 模拟真实景深
单层阴影只能浮起，要体现“深度”，得用逗号分隔的多组值，每组控制不同距离感的投影：
- 第一层：垂直偏移小、模糊轻、透明度低 →
0 1px 2px rgba(0,0,0,0.05)（近层微影） - 第二层：偏移加大、模糊适中、透明度中等 →
0 4px 6px rgba(0,0,0,0.1)（主体浮起） - 第三层：偏移最大、模糊扩散、透明度稍高 →
0 8px 12px rgba(0,0,0,0.15)（远层氛围） - 避免全写成
0 4px 12px—— 那只是更重的单层影，不是深度 - 别用
inset，它把阴影塞进菜单内部，破坏悬浮感
深色模式下阴影颜色必须手动适配
Bootstrap 不会自动切换 box-shadow 的颜色，深色背景下用默认 rgba(0,0,0,0.1) 会糊成一片，必须显式定义暗色版本：
- 在
:root下写默认浅色阴影 - 在
.dark或[data-bs-theme="dark"]下重写：--bs-dropdown-box-shadow: 0 4px 12px rgba(255, 255, 255, 0.08); - 或者直接在 CSS 中用媒体查询：
@media (prefers-color-scheme: dark) { .dropdown-menu.show { box-shadow: 0 4px 12px rgba(255, 255, 255, 0.08); } } - 千万别省略 alpha 值（比如只写
rgba(0,0,0)），缺省会继承 1，导致纯黑阴影
Popper 动态样式会覆盖你的 box-shadow
Bootstrap 5 默认用 Popper.js 定位，它会在 .dropdown-menu 上写内联 transform 和 top/left，但不会碰 box-shadow。真正干扰你阴影的是它可能同时写的 display: block 或其它属性冲突——不过更常见的是你忘了：当菜单没展开时，.dropdown-menu 是 display: none，所有过渡和阴影都无效。
- 确保过渡写在基础类上：
.dropdown-menu { transition: box-shadow 0.2s ease; }，而不是只写在.show上 - 如果要用动画（比如 fade + shadow 变化），起点状态必须明确：
.dropdown-menu { box-shadow: none; }，终点才设多层值 - 不要在
.dropdown-menu上设overflow: hidden，否则阴影会被裁掉
box-shadow，而是记住它永远受 display 控制、被 Popper 的定位逻辑牵连、且在深色模式下必须双份定义——漏掉任何一环，阴影就只在某一种状态下可见。 
