bootstrap 5 中毛玻璃效果需手动实现 backdrop-filter，必须配合 rgba 背景色、-webkit 前缀、position: sticky/fixed 及 @supports 兜底，并按断点调整 blur 值以兼顾性能与视觉。
毛玻璃效果在 Bootstrap 5 中必须手动加 backdrop-filter
Bootstrap 本身不提供 backdrop-filter 封装类，所有“毛玻璃”（frosted glass）效果都得靠自定义 CSS 实现。官方 CSS 只负责布局和交互逻辑，视觉层的模糊必须自己补。
常见错误是直接套用 .bg-light 或 .bg-white，结果背景纯白、毫无通透感——那不是毛玻璃，只是半透明遮罩。
- 必须显式设置
background-color: rgba(255, 255, 255, 0.7)（或更低 alpha 值）提供基础遮盖 - 紧接着加
backdrop-filter: blur(10px)才能触发模糊采样 - 记得加
-webkit-backdrop-filter: blur(10px)兼容 Safari（iOS / macOS 必须） - 若父容器没设
overflow: hidden，模糊可能溢出边界，导致边缘锯齿或意外渲染
导航栏容器需脱离文档流才能让 backdrop-filter 生效
backdrop-filter 只对“背后”的内容起作用，如果导航栏用默认的 position: relative，它背后只有 body 背景色——根本没东西可模糊。
正确做法是让导航栏“浮”在内容之上，且背后真正有内容（比如滚动时的页面主体）。这就要求：
- 给
<nav></nav>加position: sticky或position: fixed - 确保其父容器（如
）有真实内容且可滚动 - 避免在导航栏上加
z-index: -1或transform（某些 transform 会创建新层叠上下文，切断 backdrop 采样链） - 不要用
filter: blur()替代 —— 那是对元素自身模糊，不是背景采样，还会严重拖慢滚动性能
响应式断点下 blur 值要动态调整
小屏设备（尤其是移动端）对模糊敏感度高：同样的 blur(12px) 在手机上容易糊成一片，文字辨识度下降；大屏则可能显得太“清”，失去毛玻璃质感。
推荐按 Bootstrap 断点分层控制：
-
@media (max-width: 576px)：用blur(6px)，兼顾性能与可读性 -
@media (min-width: 577px) and (max-width: 992px)：blur(8px) -
@media (min-width: 993px)：blur(12px)
别用 JS 动态改 style —— 会触发重排，卡顿明显；纯 CSS 媒体查询更轻量、更可靠。
兼容性兜底：Safari 和旧版 Chrome 的 fallback 方案
Chrome 119+、Firefox 103+、Edge 117+ 支持 backdrop-filter，但 iOS Safari 15.4+ 才稳定支持，Android WebView 则参差不齐。
检测不到时，不能留白或降级为纯色——用户会感觉导航“突然变重”。稳妥做法是：
- 用
@supports (backdrop-filter: blur(1px))包裹毛玻璃样式 - 外层先写基础半透明白底：
background-color: rgba(255, 255, 255, 0.85) - 再在
@supports块里覆盖为rgba(255, 255, 255, 0.7)+backdrop-filter - 绝对不要依赖 JS 检测
CSS.supports('backdrop-filter', 'blur(1px)')—— 同步阻塞渲染，首屏延迟明显
最易被忽略的是：模糊值过大会让文字阴影（text-shadow）也变糊，建议对 .navbar-brand 和 .nav-link 单独加 filter: none 或提升 z-index 层级来保锐度。
