backdrop-filter: blur() 单独使用无效，必须配合半透明背景（如rgba）才能显现毛玻璃效果；常见失效原因包括元素背景不透明、父容器overflow:hidden裁剪采样区、背后无真实内容可模糊；推荐blur值为4px–8px，需加-webkit前缀兼容safari，禁用opacity以免破坏合成层。
backdrop-filter: blur() 单独写基本没用，必须搭配半透明 background 才能看见效果。
为什么加了 backdrop-filter 还是没模糊
最常踩的坑就三个：
- 元素自身
background-color是纯色（比如white或#fff），没透出背后内容——改用rgba(255, 255, 255, 0.15)这类带 alpha 的值 - 父容器设置了
overflow: hidden，尤其还带border-radius，Safari 直接放弃合成——临时解法是加position: absolute脱离文档流 - 背后没东西可模糊：比如
body是纯白背景，或毛玻璃层底下是空的——确保它下面有图片、渐变或至少是带内容的容器
blur() 值设多少才合适
不是越大越通透，而是越容易糊字、掉帧、发灰：
- 桌面端推荐
blur(4px)～blur(8px)：足够区分层次，又不牺牲文字清晰度 - 移动端慎用超过
blur(10px)：iOS 16.5 以下 Safari 易卡顿，Android 中低端机边缘失焦明显 - 如果用了
saturate(180%)补色彩，可把 blur 值往低调一档（比如从 8px 改成 6px）
如何安全兼容 Safari 和微信 X5
不能只靠 @supports (backdrop-filter: blur(1px))，它会放行已知有问题的旧版 WebKit：
- Safari 必须写
-webkit-backdrop-filter: blur(6px)，现代版本也别省 - 微信内置浏览器（X5 内核）至今不支持，得降级：
background: rgba(255, 255, 255, 0.2)+box-shadow: 0 2px 12px rgba(0,0,0,0.08) - 稳妥的检测写法是：
@supports (backdrop-filter: blur(1px)) and (not (-webkit-backdrop-filter: blur(1px)))—— 这个条件能筛掉部分伪支持的旧内核
opacity 和 backdrop-filter 一起用就失效
因为 opacity 会创建隔离合成层，切断 backdrop-filter 对背后像素的采样路径：
- 别给毛玻璃元素本身加
opacity，想调透明度就改background-color: rgba(..., 0.12) - 父容器也不能有
opacity，否则子元素的backdrop-filter全部失效 - 需要 hover 变化？用
transition: background-color 0.3s替代
真正难的不是写对那几行 CSS，而是判断「哪里该用」和「哪里必须砍掉」——弹窗、导航栏这类固定区域值得上，但瀑布流里每个卡片都套一层，GPU 就开始报警了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
