Bootstrap如何去掉Navbar导航栏固定在顶部时的阴影

Bootstrap默认通过.navbar类的box-shadow属性为固定顶部导航栏添加阴影，值为0 .5rem 1rem rgba(0,0,0,.15)，需用!important覆盖为none才能彻底去除。

Navbar固定顶部时的阴影是哪个CSS类加的

Bootstrap默认给 .navbar-fixed-top（v3）或 .navbar 配合 .fixed-top（v5）加了 box-shadow，来源是 .navbar 自带的 box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)。不是JavaScript加的，也不是浏览器默认行为，纯CSS。

去掉阴影最直接的方法：覆盖box-shadow

在自定义CSS里写更高优先级的选择器，把 box-shadow 设为 none：

.navbar {box-shadow: none !important;}

如果只针对固定顶部的导航栏（避免影响其他navbar），可以更精确：

.navbar.fixed-top,.navbar.navbar-fixed-top {box-shadow: none !important;}

1. 必须加 !important —— Bootstrap的原生样式权重高，不加可能被覆盖失败
2. 不要只写 .fixed-top，它本身不带阴影，真正生效的是父级 .navbar
3. v4/v5中 .navbar 默认已有阴影，即使没加 .fixed-top 也会有，所以统一处理 .navbar 更稳妥

用Bootstrap Utility类能不能一键去掉

不能。Bootstrap最新Utility里没有 shadow-none 这类类名（v5.3+ 才加入 shadow-none，但仅对 .shadow 类生效，而 navbar 的阴影是写死在组件CSS里的，不走 .shadow 系统）。

1. v5.3+ 可以给 navbar 加 shadow-none，但前提是它没用 box-shadow 直接声明 —— 实际上用了，所以无效
2. 别试图用 class="navbar shadow-none" 蒙混过关，没用
3. 如果项目已升级到 v5.3+ 且你用的是 .navbar-expand + .bg-* 组合，仍需手动覆盖

去掉阴影后要注意的视觉断裂点

阴影本质是提供“悬浮感”和内容分层提示。去掉后，navbar和下方内容容易粘连，尤其当背景色相近时：

1. 检查 navbar 和紧邻的 .container 或 .main 是否有足够对比度
2. 考虑加 1px 上边框：border-bottom: 1px solid rgba(0,0,0,.05)，比阴影更轻量、更可控
3. 移动端下拉刷新时，无阴影的 navbar 容易和页面内容“叠一起”，可加 backface-visibility: hidden 防闪烁（小概率）

真正要动的就一行 CSS，但得知道它在哪、为什么加、去掉后缺了什么 —— 阴影通常不是异常，是设计信号。