backdrop-filter必须与rgba()背景配合才生效，因它模糊的是元素背后内容而非自身；若背景不透明（如white或#fff）则无物可模糊，推荐alpha值0.08–0.3，blur值宜选4–6px。
backdrop-filter 必须和 rgba() 背景一起用才生效
写了 backdrop-filter: blur(12px) 却没反应？大概率是背景色不透明。它模糊的是“元素背后的内容”，不是自己——如果 background-color: white 或 background: #fff，背后内容被完全遮住，自然看不到模糊。
必须用 rgba()（或 hsla()）显式声明 alpha 值，推荐区间：0.08–0.3。太低（如 0.02）在 iOS 15.4 之前 Safari 渲染异常；太高（如 0.5）失去毛玻璃通透感。
- 浅色主题常用：
background: rgba(255, 255, 255, 0.12) - 深色主题更稳：
background: rgba(30, 30, 46, 0.4) - 禁用
background: transparent——它不提供遮罩，视觉上像挖了个洞，不是玻璃
@mixin glass 应该支持参数化 background
硬编码 background 的 Mixin 在深色模式或主题切换时会卡死。SCSS Mixin 最好把背景色、模糊值、饱和度都拆成参数，或至少留出占位符供覆盖。
例如这个可维护版本：
立即学习“前端免费学习笔记（深入）”；
@mixin glass(
$blur: 12px,
$saturation: 180%,
$bg: rgba(255, 255, 255, 0.12),
$border: rgba(255, 255, 255, 0.12)
) {
background: $bg;
backdrop-filter: blur($blur) saturate($saturation);
-webkit-backdrop-filter: blur($blur) saturate($saturation);
border: 1px solid $border;
border-radius: 16px;
}
- 调用时可灵活覆盖：
@include glass(16px, 160%, rgba(20, 20, 36, 0.45)) -
$saturation超过200%在部分 Android WebView 中会溢出变色，保守控制在160%–190% - 别在 Mixin 内写
box-shadow或padding——这些属于布局/语义，应由具体组件决定
多层 backdrop-filter 元素必须共用 stacking context
在一个卡片里嵌套多个带 backdrop-filter 的子元素（比如标题栏 + 内容区），容易出现某一层模糊了另一层的错乱效果。这不是 bug，是浏览器按层叠上下文逐层计算 backdrop 区域的结果。
关键约束：
- 所有玻璃元素的父容器**不能触发新 stacking context**：避免设
opacity < 1、transform、will-change、filter等属性 - 父容器建议设
position: relative但不加z-index，让子元素自然共享同一层叠层级 - 若必须分层（如悬浮按钮盖在玻璃卡片上），用
z-index: 1提升按钮，但按钮自身**不能带 backdrop-filter**——否则它会模糊自己下面那层玻璃，而不是页面底层
blur 值选 4px–6px 是性能与质感的平衡点
不是越大越高级。实测在多数设备（尤其 iOS 和中低端 Android）上，blur(1px) 几乎不可见，blur(10px) 边缘严重发虚、重绘开销陡增，滑动时易掉帧。
- 默认起点推荐：
blur(4px)—— 文字可读、背景可辨、GPU 压力低 - 大尺寸模态框可用
blur(6px)，但需避开 iOS 16.5 以下 Safari（已知渲染卡顿） - 绝对避免小数：
blur(0.5px)会被多数浏览器向下取整为0px，等于没开 - 慎用
will-change: transform或transform: translateZ(0)—— 它们会加重合成层负担，与backdrop-filter叠加后掉帧风险翻倍
真正难的不是写对那一行 backdrop-filter，而是控制好它生效所需的整个渲染链路：透明背景、层叠上下文、父容器 overflow、设备兼容阈值——漏掉任意一环，效果就断在用户屏幕上。
