直接改 .dropdown-menu 的 box-shadow 必须加 !important，因 bootstrap 默认设了高权重 box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)，需用 .dropdown-menu { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; } 等写法强制覆盖，并推荐结合父级限定、alpha 值 0.1～0.2 及三参数格式适配多端渲染。
直接改 .dropdown-menu 的 box-shadow 就行，但必须加 !important
Bootstrap 默认给 .dropdown-menu 设了 box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)，这个值在所有版本（4.x/5.x）里都存在，且权重高。你写 .dropdown-menu { box-shadow: none; } 很可能被划掉——浏览器开发者工具里能看到它被 Bootstrap 自带规则覆盖。
安全写法是：
- 用
!important强制覆盖，比如：.dropdown-menu { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; } - 加父级限定避免全局污染，例如导航栏里的下拉菜单：
.navbar .dropdown-menu { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } - 别只改颜色不调深度：
rgba(0,0,0,0.05)看起来像没阴影，rgba(0,0,0,0.3)又太重，推荐从0.1～0.2区间试
box-shadow 深度参数怎么对应视觉效果
Bootstrap 默认的 box-shadow 是四参数格式：offset-x offset-y blur-radius spread-radius color。实际影响“深度感”的主要是前三个：
-
offset-y（第二个值）：控制阴影向下偏移量，越大越“浮起”，但超过6px容易显得突兀 -
blur-radius（第三个值）：模糊半径，决定阴影边缘软硬程度；4px～12px是常用范围，0就是硬边框，>16px在小屏上会糊成一片 -
color的 alpha 值（如rgba(0,0,0,0.15)）：透明度越低，阴影越轻、越“远”；越高则越近、越实
常见组合示例：
.dropdown-menu {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* 轻量悬浮 */
}
.dropdown-menu {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important; /* 中等深度，适合深色背景 */
}
移动端真机上阴影经常“消失”或发虚
iOS Safari 和部分 Android 浏览器对 box-shadow 渲染有差异：小 blur 值（2px）会导致边缘锯齿或半透明层叠错乱。
- 解决办法是放弃
spread-radius，统一用三参数写法：box-shadow: 0 4px 12px rgba(0,0,0,.12); - 如果用了
backdrop-filter（毛玻璃效果），iOS 必须加-webkit-backdrop-filter，否则阴影会被滤镜吃掉 - 折叠态菜单（
.navbar-collapse.show .dropdown-menu）要单独设阴影——它和常规下拉菜单 DOM 结构不同，CSS 不会自动继承
用 CSS 变量统一控制（Bootstrap 5.3+）
Bootstrap 5.3 开始支持 --bs-dropdown-box-shadow 变量，但注意：它只对 .dropdown-menu 生效，且必须在 Bootstrap CSS 加载后注入。
- 全局改法：
:root { --bs-dropdown-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); } - 局部改法：给特定容器加 class，再作用域内重设变量，比如
.my-header .dropdown-menu { --bs-dropdown-box-shadow: 0 2px 6px rgba(0,0,0,0.05); } - 变量不生效？检查是否引入顺序错了——你的
<style></style>或 CSS 文件必须在bootstrap.min.css之后
最麻烦的不是写错值，而是忘了阴影和背景色、边框、文字色得同步调——比如把阴影加深了，但背景还是纯白，结果看起来像菜单“飘在空中”。
