backdrop-filter: blur()需配合rgba()半透明背景才能生效，因它仅模糊元素背后内容；若背景不透明或父容器overflow: hidden，则无模糊效果，且须加-webkit前缀兼容Safari及旧版Chrome。
直接用 backdrop-filter: blur() 就行，但必须配 rgba() 背景色、加 -webkit-backdrop-filter 前缀，否则 Safari 和旧版 Chrome 里基本不显示。
为什么 backdrop-filter: blur(8px) 单独写没效果
它只模糊“元素背后的内容”，不是模糊自己。如果元素背景是 #fff 或 white 这种完全不透明的值，背后内容根本透不出来——你看到的只是纯白块，不是玻璃。
- 必须用
background: rgba(255, 255, 255, 0.15)这类带 alpha 的颜色，让背景“透一点” - 父容器不能有
overflow: hidden（尤其还带border-radius），Safari 会直接放弃合成，毛玻璃变空白 - 确保它底下真有东西：比如
body设了背景图，或者有个带内容的.bg-layer，空 div + 白底 = 模糊了个寂寞
怎样让毛玻璃在 Safari 和微信里不崩
微信 X5 内核至今不支持 backdrop-filter，Safari 15.4 之前也只认 -webkit-backdrop-filter，光靠 @supports (backdrop-filter: blur(1px)) 会误判。
- 兼容写法必须同时写两行：
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); - 降级方案别用
opacity（它会切断采样），改用更厚的background: rgba(255, 255, 255, 0.25)+box-shadow: 0 2px 12px rgba(0,0,0,0.08) - 稳妥检测写法：
@supports (backdrop-filter: blur(1px)) and (-webkit-backdrop-filter: blur(1px))—— 这个能筛掉伪支持的旧内核
blur() 值设多少才不糊字又不卡顿
不是越大越高级，而是越容易让文字发虚、GPU 掉帧、iOS 16.4 以下 Safari 直接卡死。
- 桌面端推荐
blur(4px)～blur(8px)：足够区分层次，又不牺牲可读性 - 移动端慎用超过
blur(10px)：Android 中低端机边缘失焦明显，iOS 16.5 以下易卡顿 - 如果加了
saturate(180%)补色彩，可把blur往低调一档（比如从8px改成6px） - 别在瀑布流每个卡片上都套一层——GPU 警报不是吓唬人的
真正难的不是写对那几行 CSS，而是判断「哪里该用」和「哪里必须砍掉」：弹窗、导航栏这类固定区域值得上；但列表项、轮播图每张图都来一下，用户手滑两下就掉帧了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
