<p>backdrop-filter 在 Less 中直接写会失效，因旧版 Safari 和 IE 不支持且无降级提示；需用声明式降级（先设 rgba 背景）+ @supports 检测（并兼容 Safari bug），配合 -webkit- 前缀生成安全 CSS。</p>
backdrop-filter 在 Less 中直接写会失效？
因为 backdrop-filter 是 CSS 原生属性，Less 编译器不会报错，但部分浏览器（尤其是旧版 Safari 和所有 IE）根本不支持它——直接写 backdrop-filter: blur(10px) 在 iOS 15.4 之前或 Chrome 89 以下可能完全没效果，且无降级提示。
真正要解决的不是“怎么写”，而是“怎么安全地用 + 有 fallback”。原生写法不等于可用，必须配合特性检测和渐进增强逻辑。
为什么不能只用 @supports 封装成 Mixin？
@supports (backdrop-filter: blur(1px)) 看似合理，但实际在 Safari 15.2–15.4 存在 bug：该语句返回 true，而 backdrop-filter 却被静默忽略。更糟的是，某些安卓 WebView 甚至把 @supports 本身解析失败，导致整条规则被丢弃。
所以 Mixin 必须绕过纯 CSS 检测，改用「声明式降级 + 视觉 fallback」双保险：
立即学习“前端免费学习笔记（深入）”；
- 始终先设置一层半透明背景（
background-color: rgba(255,255,255,0.7)），保证基础可读性 - 再用
@supports包裹backdrop-filter，并显式覆盖掉上一步的background-color（用transparent或同色系低 alpha 值） - 避免在
@supports块里写其他依赖毛玻璃的样式（比如依赖模糊后透出的内容做定位），否则降级时布局会错乱
一个真正可用的 Less Mixin 写法
这个 Mixin 不做运行时检测，只生成兼容性友好的静态 CSS：
.glass-effect(@bg: rgba(255, 255, 255, 0.7), @blur: 10px, @saturate: 1.1) {
background-color: @bg;
backdrop-filter: blur(@blur) saturate(@saturate);
-webkit-backdrop-filter: blur(@blur) saturate(@saturate);
@supports (backdrop-filter: none) {
background-color: transparent;
}
// 可选：对老 Safari 加兜底（iOS < 15.4）
@supports (-webkit-backdrop-filter: none) and (not (backdrop-filter: none)) {
background-color: @bg;
}
}
用法示例：
.header {
.glass-effect(#ffffff20, 12px);
}
注意点：
-
-webkit-backdrop-filter必须显式写出，不能依赖 Autoprefixer —— 它只加前缀，不补全整个声明 - 不要在 Mixin 里写
border-radius或box-shadow等关联样式，那些应由调用方控制，否则 fallback 时圆角/阴影会突变 - 如果父容器有
overflow: hidden，毛玻璃在 Safari 上可能失效，这是渲染层限制，Mixin 无法修复
移动端真机调试最容易漏掉的坑
iOS 微信内置浏览器（WKWebView）默认禁用 backdrop-filter，即使系统是 iOS 16+。必须手动开启 WebKit 实验性功能，且仅限 PWA 或通过 webview.allowsBackForwardNavigationGestures = YES 启用的场景才可能生效。
所以线上项目务必准备视觉 fallback：background: linear-gradient(135deg, #fff8, #f0f0f08) 这类带轻微噪点或渐变的半透色，比纯 rgba() 更接近毛玻璃观感，用户感知更平滑。
没有「一次封装，到处可用」的 Mixin。每个用到的地方，都得检查父级 stacking context、是否触发硬件加速（transform: translateZ(0) 有时能唤醒 Safari 渲染）、以及微信/QQ 浏览器的实际 UA 字符串行为。
