shadow-sm 不能直接为 .navbar 添加底部阴影，因其 box-shadow 偏移为 0 且被纯色背景覆盖；须用带垂直偏移的自定义 class（如 navbar-bottom-shadow）配合 rem 单位、深色模式适配及正确加载顺序实现。
shadow-sm 类不能直接给 bootstrap 导航栏（.navbar）加底部阴影——它会失效，不是你写错了，是 css 层叠和盒模型限制导致的。
为什么 shadow-sm 加在 .navbar 上没反应
导航栏默认有纯色背景（如 background-color: #fff），且自身高度固定、无内边距撑开视觉空间；shadow-sm 产生的 box-shadow 是绘制在元素“外边缘”的，但被 .navbar 的背景色和布局压住，人眼根本看不到。
- 检查 computed styles 会发现
box-shadow确实存在，但 z-index 和背景色让它不可见 -
.navbar-light/.navbar-dark这类修饰类会覆盖或重置阴影行为 -
shadow-sm的值是0 0.125rem 0.25rem rgba(0,0,0,0.075)，偏移量为 0，没有“向下落”的方向感，自然不显“底部”
想让导航栏有底部阴影，得绕过 shadow-sm 直接写 CSS
必须用带垂直偏移的 box-shadow，并确保样式加载顺序正确（你的 CSS 在 Bootstrap 之后）：
- 给导航栏加一个自定义 class，比如
navbar-bottom-shadow - 写明确定义：
.navbar-bottom-shadow { box-shadow: 0 2px 6px rgba(0,0,0,0.08); } - 避免用
!important，除非你无法控制 CSS 加载顺序 - 别把 class 加在
.navbar-brand或.nav-link上——它们不是容器，加了也白加
响应式下阴影容易“跳变”，怎么稳住
导航栏在小屏折叠时高度会变（比如从 56px → 48px），如果阴影参数用 px 写死，缩放时视觉会突兀断层。
- 改用 rem 单位：
box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.08) - 不要依赖
height或padding去“配合”阴影——阴影是外绘的，跟元素内部尺寸无关 - 测试真机展开/收起汉堡菜单动画阶段，确认
.navbar-collapse出现时不丢失阴影——应统一挂载在最外层.navbar上，而非子容器
深色模式下阴影发灰或看不清
Bootstrap 5.3+ 支持 data-bs-theme="dark"，但 rgba(0,0,0,0.08) 在深背景上几乎不可见，而照搬浅色值又显得脏。
- 用 CSS 自定义属性解耦：
:root { --navbar-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.08); } [data-bs-theme="dark"] { --navbar-shadow: 0 0.125rem 0.375rem rgba(255,255,255,0.06); } .navbar-bottom-shadow { box-shadow: var(--navbar-shadow); } - iOS Safari 对透明度渲染偏保守，
0.06比0.05更稳妥 - 别用
color-mix()或hsl()动态算色——目前浏览器支持差，且 Bootstrap 未暴露对应钩子
真正难的不是写那行 box-shadow，而是意识到：导航栏的阴影不是“加个类就行”的事，它卡在背景、层级、响应式缩放、深色适配四个交点上。漏掉任意一环，效果就断掉。
