dialog::backdrop是唯一可样式化遮罩层的出口，必须调用showModal()才生成，且仅支持background、opacity等有限属性，不支持z-index、transform等；Firefox至今不支持，需降级方案。
dialog元素的遮罩层默认不可样式化，::backdrop是唯一出口
原生 <dialog> 的遮罩层（即打开时背后的半透明灰层）在 Chrome 97+、Edge 97+ 和 Safari 15.4+ 中才支持 ::backdrop 伪元素；Firefox 目前完全不支持（截至 2024 年中），这点必须前置确认。它不是子元素，也不继承父级样式，dialog::backdrop 必须单独声明，且层级固定在 dialog 内容之下、页面内容之上——不能用 z-index 调整相对顺序。
::backdrop不响应pointer-events，但能影响dialog交互体验
即使给 ::backdrop 设置 background: rgba(0,0,0,0.8) 或动画，点击它仍会触发 dialog.close()（这是浏览器默认行为）。若想禁用点击关闭，得在 JS 中监听 click 并 event.stopPropagation()，同时注意：阻止 backdrop 点击后，dialog 内容区外的点击可能穿透到底层元素，需配合 dialog.open = true 时手动加 body { overflow: hidden; } 防滚动冲突。
-
::backdrop上设cursor: default不会改变鼠标样式——它始终是default，且无法设pointer-events: none（无效） - 过渡动画只对
background和opacity有效；transform、filter等在多数浏览器中被忽略 - Safari 对
backdrop-filter支持不稳定，慎用于模糊效果
兼容性兜底方案必须绕过::backdrop
当目标环境含 Firefox 或旧版 Chrome，::backdrop 彻底失效，此时只能放弃原生 dialog，改用自定义结构：一个全屏 <div class="modal-backdrop"> + 绝对定位的 <dialog>（或 div 模拟），再用 JS 控制显隐和焦点。这样虽失去语义化和 showModal() 的原生聚焦锁，但能 100% 控制遮罩样式、动画、点击逻辑。关键点：dialog 元素本身需设 position: relative; z-index: 1000;，而自定义 backdrop 设 z-index: 999;，避免 Safari 下 backdrop 层级错乱。
实际可用的::backdrop样式片段
以下代码在支持浏览器中可直接使用，注意不要嵌套其他选择器（如 .my-dialog::backdrop 无效，必须是 dialog::backdrop）：
立即学习“前端免费学习笔记（深入）”；
dialog::backdrop {
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
animation: fade-in 0.3s ease-out;
}
<p>@keyframes fade-in {
from { opacity: 0; }
to { opacity: 0.85; }
}</p><p>/<em> Safari 15.4+ 需额外声明以启用 backdrop-filter </em>/
@supports (backdrop-filter: blur(4px)) {
dialog::backdrop {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
}
}渐变背景在部分安卓 WebView 中渲染异常，建议降级为纯色；动画时间超过 0.4s 容易在快速开关 dialog 时出现残留帧，实测 0.2–0.3s 最稳妥。
