直接加 shadow-sm 无效是因为其垂直偏移为0且被 navbar 纯色背景遮挡；应自定义带垂直偏移的 box-shadow 并作用于最外层 .navbar，配合 scroll 监听和深色模式适配。
直接加 shadow-sm 为什么没效果
不是类名写错了，是 shadow-sm 默认生成的 box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) 垂直偏移为 0，没有“向下落”的视觉感；加上 .navbar 默认有纯色背景（如 background-color: #fff），阴影被完全压在底下，人眼根本看不到。
常见错误现象：
- 开发者工具里能看到
box-shadow属性已生效，但页面上毫无变化 - 给
.navbar-brand或.nav-link加shadow-sm，结果阴影被裁掉或位置错乱 - 响应式折叠后阴影突然消失——因为
.navbar-collapse是独立容器，没继承父级阴影
真正起作用的是带明确垂直偏移的自定义 box-shadow，且必须挂载在最外层 .navbar 元素上。
用 CSS 自定义底部阴影（推荐做法）
最可控、兼容性最好的方式是绕过 Bootstrap 工具类，直接写带垂直偏移的 box-shadow：
.navbar-bottom-shadow {
box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08);
}
关键点：
- 用
rem单位而非px，确保缩放和响应式下阴影比例稳定 - 第一组值
0是水平偏移（保持居中），第二组0.125rem是垂直偏移（决定“底部感”强弱） - 第三组
0.375rem是模糊半径，越大越柔和，但移动端建议 ≤ 0.5rem，避免文字边缘发虚 - rgba 的 alpha 值（第四个参数）控制深浅：0.05 太淡，0.15 在深色背景下易糊，0.08 是较安全的起点
滚动时动态加阴影（监听 scroll）
固定定位的 .navbar 需要感知滚动状态才能“浮现”，不能靠 CSS 自动触发。必须用 JS 监听 window.scrollY：
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 10) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
对应 CSS：
.navbar.scrolled {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 1040;
}
注意：
- 阈值别设成
0，否则页面刚加载就触发，用户还没动就看到阴影，体验突兀 -
z-index: 1040是为了略高于 Bootstrap 默认的1030，防止被轮播图、弹窗等遮挡 - 不要在 scroll 回调里直接改
style.boxShadow，会覆盖 CSS 中其他规则，也不利于主题切换
深色模式和多层景深适配
单层阴影不够“立体”，真实卡片深度靠多层 box-shadow 模拟；深色模式下默认 rgba(0,0,0) 几乎不可见，必须单独处理：
: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);
}
如果追求更强景深感，可叠加三层（注意顺序）：
box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15);
重点在于：每层垂直偏移递增、模糊半径递增、透明度递增——这不是炫技，而是模拟真实光线投射的物理逻辑。漏掉任一层，阴影就会显得“平”。
