直接用 backdrop-filter: blur(12px) saturate(180%) 可实现接近 ios 原生质感的导航栏，单独 blur 会因高斯模糊丢失色彩对比度而发灰，必须组合饱和度且不可拆行声明；需确保父容器有真实内容、禁用 overflow: hidden + border-radius 组合、深色模式下调基底色而非仅调滤镜，并用 @supports 提前降级。
直接用 backdrop-filter: blur() saturate() 就能做出接近 iOS 原生质感的导航栏，但只写 blur 会发灰、边缘糊成一片——必须组合饱和度，且不能拆开声明。
为什么单独 blur(12px) 看起来像蒙尘玻璃？
高斯模糊天然丢失色彩对比度和饱和度，blur() 单独作用后背景变灰、发闷，不是 bug，是算法特性。iOS 系统级毛玻璃背后实际叠加了色彩增强逻辑，CSS 里得手动补上：saturate(160%–190%) 是实测安全区间；超过 200% 在部分 Android WebView（尤其深蓝/紫渐变底图）会溢色。
-
blur(12px) saturate(180%)是兼顾清晰度与通透感的常用起点 - 别把两个函数拆成两行写：
backdrop-filter: blur(12px); backdrop-filter: saturate(180%);—— 后者会覆盖前者，Safari 可能只生效一个 - 必须同时加
-webkit-backdrop-filter，iOS 15.4 之前 Safari 仅认这个前缀
导航栏背后没内容可模糊？检查这三处硬性条件
backdrop-filter 模糊的是元素“背后层叠上下文中的内容”，不是它自己的背景色或图片。如果父容器空、纯色、或被裁剪，就等于在模糊空气。
- 确保导航栏的父容器有真实视觉内容：比如
body { background: url("scene.jpg") }或多层渐变background: linear-gradient(), radial-gradient() - 禁用
overflow: hidden+border-radius组合——WebKit（尤其是 iOS 15.4 之前）会直接放弃合成，显示为纯色块 - 临时加
outline: 1px solid red到父容器，确认它确实覆盖了你想模糊的区域
深色模式下毛玻璃发青或过亮？改基底色比调滤镜更有效
同一套 blur+saturate 在深色背景下容易失衡：浅色基底 rgba(255,255,255,0.1) 在暗背景上会泛白，深色基底 rgba(30,30,46,0.4) 才能压住反光感。
- 深色模式优先调
background和border-color，而不是加大saturate值 - 深色下推荐
border: 1px solid rgba(255,255,255,0.08)，太浓会割裂，太淡则失去玻璃边缘感 - 慎用
brightness()或contrast()：它们会放大底层噪点，模糊区边缘易出光晕或色块
老安卓或 X5 内核不生效？降级方案要提前埋点
Can I Use 显示 backdrop-filter 全局支持率已达 97%，但魔改 Webview（如某信、某手内核）仍可能静默失败。不能等用户反馈才处理。
- 用
@supports (backdrop-filter: blur(1px))包裹毛玻璃样式，内部写降级：background: rgba(255,255,255,0.2) - X5 内核需双条件检测：
@supports (-webkit-backdrop-filter: blur(1px)) and (backdrop-filter: blur(1px)) - 别依赖 JS 检测后再插入样式——FOUC（闪白）明显，直接用 CSS @supports 最稳
真正难的不是写出那几行 CSS，而是理解 backdrop-filter 模糊的不是“背景图”，而是“背后所有层叠内容”；一旦父级被 overflow: hidden 截断，或者层级错乱，再调参数也没用。先让模糊有东西可模，再调饱和度和透明度，顺序错了，效果永远差一口气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
