Backdrop Filter 在移动端不可默认使用，需检测设备与浏览器支持：iOS Safari 13.4+ 仅部分元素支持且需非透明背景和层叠上下文，Android Chrome 102+ 支持但 WebView（如微信）基本不生效。
Backdrop Filter 在移动端是否可用？
不能默认用，得先看设备和浏览器支持情况。iOS Safari 从 13.4 开始支持 backdrop-filter，但仅限于部分元素（如 div、section）且必须满足「非透明背景 + 层叠上下文」两个条件；Android Chrome 从 102 版本起支持，但低端机型或 WebView（比如微信内置浏览器）大概率不生效或渲染异常。
- 必须设置
background-color（哪怕只是rgba(255,255,255,0.01)），纯transparent会直接禁用滤镜 - 需触发层叠上下文：加
position: relative、z-index: 0或isolation: isolate - iOS 上若父容器有
overflow: hidden，可能裁掉模糊边缘，建议改用overflow: visible或留出 padding
基础写法与 fallback 方案
直接写 backdrop-filter: blur(10px) 不够，必须搭配降级处理：
.glass {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* iOS 必加 */
/* fallback：无滤镜时靠半透背景模拟 */
}-
-webkit-backdrop-filter不是可选，iOS 必须带前缀，否则无效 - 不要依赖
@supports (backdrop-filter: blur(1px))做全量判断——某些安卓 WebView 声称支持却渲染为纯色，建议用 UA 检测 + 手动开关 - 如果需要文字可读，务必叠加
color和text-shadow，模糊背景会让浅灰文字直接“消失”
性能卡点：为什么页面变卡或白屏？
backdrop-filter 在移动端是 GPU 密集型操作，尤其在滚动区域里滥用会触发频繁重绘：
- 避免在
body或长列表项上直接使用，优先用固定定位的悬浮层（如弹窗、顶部导航） - 不要和
transform: translateZ(0)或will-change: transform同时用，可能引发 iOS 渲染管线冲突 - 模糊半径别超过
12px，实测blur(20px)在 iPhone XR 上帧率掉到 30fps 以下 - 微信内嵌浏览器（X5 内核）基本不支持，强行启用会导致整个容器不可见，得用 JS 检测后移除 class
替代方案：当 backdrop-filter 失效时怎么救？
真遇到不支持或崩溃，别硬扛，换轻量级方案：
立即学习“前端免费学习笔记（深入）”；
- 用两张图：一张原图做
filter: blur(10px)的伪毛玻璃底图，一层半透色块盖在上面 - CSS pseudo-element 叠加：给容器加
::before，设为绝对定位 +filter: blur(8px)+z-index: -1，再用clip-path限制范围 - 纯色渐变 + 边框阴影模拟层次感：
box-shadow: 0 4px 30px rgba(0,0,0,0.08)配合background: linear-gradient(135deg, #fff4, #f3f4f64d)
模糊本身不是目的，视觉分层和内容可读性才是。很多所谓“毛玻璃”效果，其实靠一点透明度+阴影+足够对比度的文字就能达到近似体验，没必要死磕一个属性。
