backdrop-filter 无效是因为作用对象错误，应加在包裹业务内容的稳定根容器（如 #app）上而非遮罩层；需用计数器控制 .glass-bg 类开关，并通过 CSS.supports 检测兼容性，推荐 blur(8px) 与 rgba(255,255,255,0.15) 搭配。
给页面根容器加 backdrop-filter 无效？因为没选对目标元素
直接在 .layui-layer-shade 或 body 上写 backdrop-filter: blur(8px) 永远不会生效——backdrop-filter 作用的是「该元素背后的内容」，而遮罩层本身是覆盖在页面之上的独立节点，它背后只有空白或 body 背景色，没有真实业务内容可模糊。
真正要模糊的，是你页面里那个包裹所有业务 DOM 的稳定容器，比如 #app、.wrapper 或 .content-area。弹窗打开时，得让这个容器「透出」并被模糊，而不是去动遮罩层本身。
实操建议：
- 确认你的 HTML 里存在一个不随
layer.open动态增删的根容器（不能是body，也不能是 Layui 自己插入的浮动节点） - 用
backdrop-filter+background-color: rgba(255,255,255,0.15)组合写在该容器上，不是弹窗层上 - 必须加
-webkit-backdrop-filter前缀，Safari 和部分安卓 WebView 仍依赖它 - 别用
filter: blur()替代——它会把文字和图标一起糊掉，不是磨砂玻璃效果
layer.open 弹出时如何安全切换磨砂状态
不能简单地在 layer.open 里写 document.getElementById('app').style.backdropFilter = 'blur(8px)'，原因有二：一是多次快速打开弹窗时样式会冲突；二是关闭回调里如果只做一次移除，多层嵌套下背景会提前变清晰。
正确做法是用计数器控制启用时机：
- 全局声明
window.layerGlassCount = 0 - 每次调用
layer.open前执行：window.layerGlassCount++，然后仅当window.layerGlassCount === 1时添加类glass-bg - 在
layer.close的 success 回调中执行：window.layerGlassCount--，仅当window.layerGlassCount === 0时移除glass-bg - 对应 CSS：
.glass-bg { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(255,255,255,0.15); }
IE/Edge ≤17 和旧安卓 WebView 怎么降级
backdrop-filter 在 IE 全系、Edge ≤17、部分 Android 6–9 的 WebView 中完全不识别，CSS 规则会被直接忽略，但更糟的是：某些旧内核遇到不认识的属性会触发渲染重排异常，导致页面闪动或布局错位。
不要靠 UA 字符串硬判断，改用 CSS 支持性检测：
- 在 JS 中用
CSS.supports('backdrop-filter', 'blur(1px)')判断是否支持 - 不支持时，改用
.glass-bg { background-color: rgba(0,0,0,0.2); }+ 提高.layui-layer-shade的 opacity 至0.85，视觉上强化聚焦感 - 切记：降级方案里禁用
backdrop-filter相关声明，避免与 opacity 遮罩叠加引发 iOS Safari 白屏 - 如需兼容 IE9–10，只能放弃模糊，改用
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2)（仅限 IE 特有滤镜，且性能差）
模糊半径设多大才不卡又不失真
模糊值不是越大越高级。实测在主流设备上：
-
blur(4px)～blur(6px)：适合小卡片提示类弹窗，响应快，iOS/Android 低端机也稳 -
blur(8px)：通用推荐值，兼顾质感与性能，Chrome 90+、Safari 15.4+、Edge 100+ 均无压力 -
blur(12px)及以上：高分屏上易失真，GPU 采样区域翻倍，部分安卓中端机（如骁龙665）滚动时掉帧明显 - 绝对不要设
blur(20px)或更高——这不是“更模糊”，是主动放弃性能底线
真正容易被忽略的是：blur 值必须和 rgba() 的 alpha 值协同调整。alpha 太低（如 0.08）会让玻璃感消失，太高（如 0.3）又像蒙了层雾。建议固定搭配为 rgba(255,255,255,0.15) + blur(8px)，再按实际背景明暗微调。
