给 .modal-content 加 backdrop-filter 才有效，因 .modal-backdrop 是纯色遮罩无下层内容可模糊；需用 rgba 半透背景、双前缀滤镜、避免 overflow: hidden 裁剪。
直接给 .modal-backdrop 加 backdrop-filter 没用——它背后是纯色遮罩，不是真实页面内容；真正起效的是给 .modal-content 加滤镜，并配半透明背景。
为什么 .modal-backdrop 上加 backdrop-filter 完全没反应
因为默认的 .modal-backdrop 是 background-color: rgba(0,0,0,0.5) 的纯色层，它盖在页面之上，自身挡死了下层内容。而 backdrop-filter 只能模糊“该元素背后的真实 DOM”，不是模糊它自己。结果就是：Chrome/Safari 里样式生效但无效果，Safari 甚至直接白屏。
- 常见现象：
backdrop-filter: blur(6px)在 DevTools 中被划掉，或弹出瞬间闪一下模糊就消失 - 根本原因：滤镜取样源为空——背后只有 body 白底，没有图文内容可模糊
- 别试图覆盖
.modal-backdrop的z-index或强行设transparent，它本就不该承担模糊任务
给 .modal-content 加毛玻璃效果的最小可行写法
不改 HTML、不碰 JS，纯 CSS 生效。关键就三点：半透背景 + 双前缀滤镜 + 避开裁剪陷阱。
-
background-color必须是带 alpha 的值，例如rgba(255, 255, 255, 0.92)；0（全透明）或1（不透明）都会让模糊失效 - 必须同时写
backdrop-filter: blur(6px)和-webkit-backdrop-filter: blur(6px)；Safari 不加-webkit-前缀就是白写 - 删掉或重置
.modal-content上可能存在的overflow: hidden；否则模糊边缘会被硬裁，看起来像贴了层灰边框 -
blur()值建议控制在4px–8px：小于4px不明显，大于8px在移动端易卡顿
Safari 白屏或模糊失效的典型诱因
这不是兼容性开关问题，而是渲染管线被意外阻断。Safari 对合成上下文极其敏感，稍有干扰就会静默禁用 backdrop-filter。
-
body或.modal父容器有overflow: hidden→ 改成overflow: visible或临时加-webkit-overflow-scrolling: touch -
.modal被包在filter: drop-shadow()或transform: translateZ(0)的祖先元素里 → 拆出来，或用contain: layout paint隔离 - 导航栏、页头用了
will-change: transform→ 把它从.modal的祖先链中移除 - 检查 computed 样式：在 DevTools 里确认
backdrop-filter显示为blur(6px)且未被划掉；若被划，往上查哪条规则覆盖了它
@supports fallback 是必须写的，不是可选
Firefox 默认禁用 backdrop-filter（需手动开启 layout.css.backdrop-filter.enabled），IE 完全不支持。不能只靠 CSS 声明，必须用 @supports 包裹并提供降级。
- 把模糊样式包裹在
@supports (backdrop-filter: blur(1px)) { ... }里，避免老浏览器解析失败或渲染异常 - fallback 方案只能是传统半透明遮罩：
.modal-backdrop保留background-color: rgba(0,0,0,0.4)，别指望用高斯模糊 PNG 替代——它无法响应滚动、缩放失真、丢失交互性 - 别省略
rgba()基础背景：即使不支持模糊，.modal-content也要有background-color: rgba(255,255,255,0.85)保证可读性
真正难的不是写那三行 CSS，而是排查父级 transform、祖先 overflow、隐藏的 filter 层——它们不会报错，只会让模糊静默失效。动手前先打开 DevTools 的 Computed 面板，盯着 backdrop-filter 和 background 看一眼，比反复改代码快得多。
