backdrop-filter单独使用无效，必须配合rgba()半透明背景，因它仅模糊元素背后内容而非自身；若背景为纯色或transparent、背后无内容、父容器overflow:hidden，均会导致失效。
backdrop-filter 单独写肯定没效果，必须和 background-color: rgba() 配合使用，否则你看到的只是纯色块，不是玻璃。
为什么 backdrop-filter: blur(10px) 写了却没反应
它模糊的是「元素背后的内容」，不是元素自己。如果元素背景是 background: white、background: #fff 或 background: transparent，那就等于：要么把背后内容全盖死，要么背后根本没东西可模糊。
-
transparent等价于rgba(0,0,0,0)，部分 Safari 版本（如 iOS 15.4 之前）会直接跳过模糊合成 - 用
hsla()或渐变代替rgba()作基础背景，在旧版 Android WebView 中容易渲染异常 - 检查浏览器开发者工具的 Computed Styles，确认
background-color的 alpha 值是否真的小于 1
rgba() 的 alpha 值怎么选才不发灰也不压暗
alpha 不是越小越好，也不是越大越通透——它直接影响底层内容的可见度和模糊质感。
- 浅色主题推荐起点：
rgba(255, 255, 255, 0.12)（太低如 0.05 在暗背景下文字难辨） - 深色主题更稳：
rgba(30, 30, 46, 0.4)（比浅色主题略高 alpha，因深底需更多透出） - 避免多层半透叠加：比如
rgba(0,0,0,0.3)+ 渐变层rgba(255,255,255,0.2)，实际透过率可能只剩 ~14%，背景细节全丢
blur 值设多少才兼顾效果与性能
桌面端看着舒服的值，放到中低端安卓或 iOS 16.5 以下 Safari 上可能直接掉帧。
立即学习“前端免费学习笔记（深入）”；
- 实测安全区间是
blur(3px)到blur(6px)：再小无质感，再大边缘发虚、文字糊成一片 -
blur(10px)在桌面端尚可，但在微信 X5 内核或某些 Android WebView 中易触发渲染卡顿 - 慎加
saturate()：超过saturate(200%)在部分 Android 设备上会溢出变色，建议控制在160%–190%
父容器 overflow: hidden 会导致毛玻璃失效
这不是 bug，是 WebKit 渲染管线限制：当父级同时有 overflow: hidden 和 border-radius，Safari 会放弃模糊合成，显示为一块实色块。
- 解法是让玻璃容器脱离父级流：
position: absolute+ 合理z-index，确保它仍在正确层级上 - 别在滚动容器里每个卡片都套
backdrop-filter——GPU 合成压力线性增长，滑动立刻掉帧 - 禁用
will-change: transform或transform: translateZ(0)：它们和backdrop-filter共存时会加重 GPU 负担
最常被忽略的一点：毛玻璃效果依赖「背后真有内容」。如果玻璃容器的祖先链里全是 background: none 或空 div，那再正确的 CSS 也模糊不出任何东西——它不是魔法，是渲染管线对真实像素的采样与处理。
