.navbar-glass 必须用 rgba(0,0,0,0.1) 替代纯色背景、清除 background-image、双写 backdrop-filter 与 -webkit-backdrop-filter，并为子元素禁用模糊；折叠菜单需单独设半透底色且依赖真实页面背景。
直接用 backdrop-filter 给深色导航栏加毛玻璃效果，必须同时满足三个硬性条件：背景是带 alpha 的 rgba()（不能用 transparent）、显式声明 -webkit-backdrop-filter、且父容器（如 body）得有真实可模糊的内容。否则 Safari 里完全不生效，滚动时还容易变灰块。
为什么 .navbar-dark 加 backdrop-filter 没反应
因为 .navbar-dark 默认设了 background-color: #343a40，把背后所有东西都盖死了——backdrop-filter 模糊的是“背后”，背后是纯黑，糊了也看不出。它不是给自身加高斯模糊，而是透过你设的半透明层去模糊底层内容。
- 必须覆盖掉这个背景：
background-color: rgba(0, 0, 0, 0.1) !important（深色主题下用黑底+低 alpha，比transparent更稳） - Bootstrap 5.3+ 默认给
.navbar-dark加了background-image: linear-gradient()，得清掉：background-image: none !important -
.navbar-brand和.nav-link子元素如果自带背景或白色文字，在深色背景下对比度崩坏，要单独调色
深色模式下最小可行的 .navbar-glass 类写法
这段 CSS 能绕过 Bootstrap 默认干扰，在深色主题和浅色主题下都可用，关键是 alpha 值和前缀双保险：
.navbar-glass {
background-color: rgba(0, 0, 0, 0.1) !important;
background-image: none !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.navbar-glass .nav-link,
.navbar-glass .navbar-brand {
color: rgba(255, 255, 255, 0.92) !important;
backdrop-filter: none;
}
-
rgba(0, 0, 0, 0.1)是起点：再低（如0.05）文字边缘发虚；再高（如0.2）就失去玻璃通透感 -
backdrop-filter和-webkit-backdrop-filter必须并存，Safari 旧版只认后者 -
backdrop-filter: none加在子元素上，防止文字被二次模糊——这是最容易忽略的一步
移动端折叠菜单（.navbar-collapse）怎么不破毛玻璃连续性
小屏点开汉堡菜单时，.navbar-collapse 默认是纯白背景，直接打断模糊层。不能靠继承，得单独兜底：
立即学习“前端免费学习笔记（深入）”；
- 给折叠区域加一层半透底色：
.navbar-glass .navbar-collapse { background-color: rgba(0, 0, 0, 0.92); } - 别用
!important覆盖整个折叠区域的backdrop-filter，它本来就不该模糊——里面是菜单项，不是背景 - 确保
body或main有真实背景（比如渐变或图片），否则折叠层背后是空的，rgba(0,0,0,0.92)就只是个灰盒子
Blur 值超过 12px 在 iOS WebView 和部分安卓低端机上会卡顿或渲染异常；border-bottom 的透明度得按 body 背景明暗动态调，否则深色背景上那条线会“断层”。
