backdrop-filter: blur不生效主因是元素无透明背景、背后无内容可模糊、父容器裁剪采样区域；需设rgba半透背景、确保层叠上下文完整、加-webkit前缀兼容safari，firefox需降级fallback。
直接加 backdrop-filter: blur(10px) 不生效，大概率是因为元素没“透”或背后没内容可模糊——这不是写错了，是条件没满足。
backdrop-filter 失效的三个硬性条件
它不是“打开就糊”，而是严格依赖渲染上下文：
- 当前元素必须有透明/半透明背景，比如
background-color: rgba(255, 255, 255, 0.2)或background: transparent；写死background: #fff或background: rgba(0,0,0,1)会完全挡住背后像素，滤镜无对象可操作 - 该元素在 DOM 堆叠顺序中，必须位于「有视觉内容」的父容器（或祖先）之上；
body有背景图、.hero有background-image、甚至滚动时露出的下层div都算——但若整个页面只有纯色background-color，背后就是空的，blur 也糊不出东西 - 父容器不能有
overflow: hidden或contain: strict；它们会裁剪掉 backdrop 的采样区域，导致模糊只在局部生效甚至完全消失
Safari 和 Firefox 的兼容处理必须做
不加前缀或不降级，用户一开页面就看到“白卡片”：
- Safari（包括 iOS 微信 X5 内核）必须写
-webkit-backdrop-filter: blur(10px)；即使 Safari 16+ 支持无前缀版本，生产环境仍要保留前缀 - Firefox 默认禁用该特性（
layout.css.backdrop-filter.enabled = false），且无计划开启；不能靠@supports检测后“启用”，而应直接提供 fallback：比如只保留background-color: rgba(255, 255, 255, 0.15)+ 边框 + 圆角，视觉上仍是轻量玻璃感 - 别在同一个元素上既写
backdrop-filter又塞::before+filter: blur()；两者逻辑冲突，Safari 可能双模糊，低端安卓可能直接卡死
blur 值怎么设才不翻车
数值不是越大越高级，它直接影响可读性与性能：
-
blur(4px)～blur(8px)：适合导航栏、小浮层，文字边缘轻微柔化但轮廓清晰 -
blur(10px)～blur(12px)：主流卡片/模态框推荐区间，通透感强又不牺牲背景识别度 - 超过
blur(16px)：中低端设备滚动时易掉帧；文字在非 Retina 屏上开始发虚，尤其搭配细字体（font-weight: 300）时更明显 - 别用
blur(0)当“关闭开关”——它仍触发合成层，GPU 开销和开的时候几乎一样
最常被忽略的一点：毛玻璃效果本质是「层间关系」，不是单个元素的样式。检查时优先看堆叠上下文是否完整、透明度是否真实生效、以及 Firefox 用户看到的 fallback 是否足够体面——而不是反复调 blur 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
