毛玻璃效果在Bootstrap 5中需手动写CSS实现，核心是backdrop-filter，但须清除默认背景色、设半透背景、加浏览器前缀，并用@supports处理Firefox兼容性，同时注意z-index、border-radius和overflow控制。
毛玻璃效果在 Bootstrap 5 中不能靠框架自带类直接实现，必须手动写 CSS，并且要特别注意 backdrop-filter 的兼容性与层级控制。
backdrop-filter 是核心，但默认不生效
Bootstrap 5 的 .navbar 默认是纯色背景（如 bg-light 或 bg-dark），这些类会覆盖你写的透明背景。想让 backdrop-filter 生效，得先清掉背景色、设半透、再加滤镜：
- 移除所有
bg-*类（比如删掉bg-white） - 显式设置
background-color: rgba(255, 255, 255, 0.1)（alpha 值建议 0.05–0.2，太高就不是“玻璃”是“磨砂纸”） - 加上
backdrop-filter: blur(10px)和-webkit-backdrop-filter: blur(10px)（Safari 必须带前缀） - 确保父容器有内容可“透出”，比如
.navbar外层不要用overflow: hidden
z-index 和 border-radius 容易被忽略
毛玻璃导航栏常被内容遮挡或边缘生硬，问题多出在层级和圆角上：
-
z-index至少设为1000（Bootstrap 5 的.navbar默认是1000，但如果你加了position: sticky，某些滚动场景下会被其他组件盖住） - 加
border-radius: 0 0 1rem 1rem（配合overflow: hidden在 navbar 容器上）能避免模糊溢出到尖角 - 如果用了
.navbar-expand-lg，记得给.navbar-collapse也加相同backdrop-filter，否则下拉菜单没玻璃感
Firefox 不支持 backdrop-filter，得降级处理
Firefox 目前仍不支持 backdrop-filter（截至 v128），强行启用会导致整个 navbar 透明无背景。稳妥做法是用 @supports 隔离：
立即学习“前端免费学习笔记（深入）”；
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.glass-navbar {
background-color: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
/* Firefox 和旧浏览器 fallback */
.glass-navbar {
background-color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}别用 JavaScript 检测，CSS @supports 更轻量、更可靠。
真正难的不是写那几行 CSS，而是调试时发现模糊没生效——八成是 background-color 没清干净，或者父元素 overflow:hidden 把模糊裁掉了。
