backdrop-filter 仅在 Chrome 100+、Firefox 103+、Safari 15.4+ 稳定支持，旧版 Safari（如 iOS 15.2 前）和微信 X5 内核完全不生效；需搭配半透 background-color 才可见效果，blur 值推荐 3–6px，且须谨慎降级与性能优化。
backdrop-filter 在哪些浏览器里根本不起作用
Chrome 100+、Firefox 103+、Safari 15.4+ 才真正稳定支持 backdrop-filter，旧版 Safari（尤其是 iOS 15.2 之前）会直接忽略该属性，连降级样式都不触发。不是“模糊不明显”，是压根没生效。
- 测试时别只看桌面 Chrome，务必用真机打开 Safari 和微信内置浏览器（X5 内核完全不支持
backdrop-filter） - Android WebView 大部分版本也不支持，
caniuse.com查到的 “partially supported” 往往意味着只在特定系统 WebView 中有阉割实现 - 不加
background-color半透明背景，毛玻璃效果在视觉上等于没开——因为模糊的是背后的层，如果当前元素背景完全透明，就什么也模糊不到
blur(10px) 模糊太重或像蒙了一层灰怎么办
高斯模糊半径不是越大越好看，超过 8px 后细节丢失严重，文字可读性断崖下跌；但小于 2px 又看不出质感。关键在于配合背景对比度和透明度一起调。
- 推荐起始值：先试
backdrop-filter: blur(4px)，再微调到3px或6px - 必须搭配
background-color: rgba(255, 255, 255, 0.7)这类带 alpha 的色值，纯transparent或rgba(0,0,0,0)会让模糊失效或发虚 - 避免在深色文字+浅色毛玻璃容器上直接套用，容易导致文字边缘发晕，加一层
text-shadow: 0 0 1px rgba(0,0,0,0.2)能稳住清晰度
用了 backdrop-filter 页面滚动变卡顿甚至白屏
backdrop-filter 是合成层操作，强制浏览器为该元素单独建层并实时模糊渲染，GPU 压力大，尤其在中低端 Android 设备上极易掉帧。
- 禁用
will-change: transform或transform: translateZ(0)等强行提层写法，它们和backdrop-filter叠加反而加重负担 - 确保父容器没有
overflow: hidden+ 圆角 + 模糊三件套同时存在，这种组合在 Safari 上常触发渲染异常 - 对长列表中的每个卡片都加毛玻璃？立刻改用「局部启用」策略：只给顶部导航栏、弹窗遮罩层这类固定区域用，滚动区域里的卡片一律降级为纯半透背景
如何安全降级让不支持的浏览器至少不崩
不能靠 @supports (backdrop-filter: blur(1px)) 就完事——有些浏览器虽声明支持，但实际渲染崩溃（比如旧版 Edge），得双保险。
立即学习“前端免费学习笔记（深入）”；
- 先写基础样式：
background-color: rgba(255, 255, 255, 0.8) - 再用
@supports (backdrop-filter: blur(1px)) and (not (-webkit-backdrop-filter: blur(1px)))包一层（排除已知有问题的 WebKit 旧实现） - 更稳妥的做法是 JS 检测：
'backdropFilter' in document.documentElement.style，通过 class 控制是否启用，避免 CSS 解析失败拖慢首屏
毛玻璃不是装饰开关，是性能与体验的权衡点。blur 值每加 1px，低端机掉帧概率上升约 15%，而用户感知不到差别——多数时候，blur(3px) 配 rgba(255,255,255,0.75) 就是那个刚好不卡、又有点味儿的临界点。
