backdrop-filter 在模态框遮罩上生效的唯一标准方式是配合 元素使用 ::backdrop 伪元素并调用 showmodal()，其他元素（如 div）不支持；需注意 safari 15.4+ 兼容性、性能优化（blur 值建议 4–10px）、避免 blur(0) 引发重绘问题。
backdrop-filter 在模态框遮罩上根本不起作用
因为 ::backdrop 不是伪元素，而是伪元素选择器，但它只对 <dialog></dialog> 元素生效，且必须配合 showModal() 调用——不是随便套个 class 就能触发的。直接给 div 遮罩层加 ::backdrop 选择器，浏览器完全忽略。
常见错误现象：::backdrop 写在非 <dialog></dialog> 元素上，或用了 show() 而非 showModal()，结果滤镜无效、背景透明无变化。
-
<dialog></dialog>是唯一合法宿主，其他元素（包括div#modal-overlay）不支持::backdrop - 必须调用
dialogEl.showModal()，show()不触发 backdrop 渲染 -
::backdrop默认 z-index 很高，但不可手动设置；它始终盖在 dialog 本身之下、页面内容之上 - 兼容性注意：Safari 15.4+ 才支持
::backdrop，旧版需回退到普通遮罩层 +backdrop-filter手动应用
用 dialog + ::backdrop 实现带毛玻璃效果的遮罩
这是目前唯一符合标准、无需 JS 操控遮罩层样式的方式。核心是把滤镜逻辑交给浏览器原生处理，而非在遮罩 div 上硬加 backdrop-filter。
使用场景：需要系统级模态行为（如自动聚焦、Esc 关闭、焦点锁）且设计要求背景模糊时。
立即学习“前端免费学习笔记（深入）”；
<dialog id="myDialog">
<p>模态内容</p>
<button onclick="this.closest('dialog').close()">关闭</button>
</dialog>
<script>
document.getElementById('myDialog').showModal();
</script>
<style>
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
}
dialog {
border: none;
padding: 24px;
}
</style>
-
dialog::backdrop的background-color必须设透明度，否则backdrop-filter不可见 - blur 值超过 12px 在部分移动端性能较差，建议控制在 4–10px 区间
- 不能用
transition动画dialog::backdrop的 opacity 或 filter，浏览器不支持动画化 backdrop
非 dialog 场景下模拟 backdrop 效果的替代方案
如果你用的是 React/Vue/自定义弹窗组件，或者需要兼容 Safari 15.3 及更早版本，就得放弃 ::backdrop，改用传统遮罩层 + backdrop-filter 手动应用。
关键点：遮罩层必须和被遮盖内容处于同一 stacking context，且层级关系明确。
- 遮罩层（
div.overlay）需设position: fixed、inset: 0、z-index高于内容但低于弹窗主体 -
backdrop-filter: blur(6px)要加在遮罩层自身，不是父容器，也不是 body - 必须同时设
-webkit-backdrop-filter，iOS Safari 仅识别该前缀 - 若遮罩层下有滚动内容，需额外加
will-change: filter防止 iOS 滚动卡顿
blur 值为 0 时 backdrop-filter 仍触发重绘？
是的。哪怕写 backdrop-filter: blur(0)，浏览器依然会启用合成层，带来额外内存开销和潜在闪烁——尤其在低端 Android 设备上。
性能影响明显：开启后，页面滚动帧率可能下降 10–15%，且部分安卓 WebView 会强制启用 GPU 渲染，导致文字发虚。
- 上线前务必用 Chrome DevTools 的 Rendering 面板勾选 “Paint flashing”，确认模糊区域是否过度重绘
- 如果设计稿允许，优先用半透色遮罩（
rgba(0,0,0,0.6)）替代低值 blur，视觉差异小但性能好得多 - 不要在频繁切换显示/隐藏的组件里动态增删
backdrop-filter，CSS 切换比 class 切换更稳定
<dialog></dialog> 驱动、用户设备是否支持、以及模糊值改到多少才既不出糊又不掉帧——这些没法靠查文档解决，得真机反复试。 
