::backdrop仅对原生调用showmodal()时生效，非元素（如div、自定义modal）无法使用；必须显式设置background-color，且不支持z-index；兼容性差，旧版safari等需回退手动遮罩层。
::backdrop 不能用于普通对话框组件——它只在 <dialog></dialog> 元素处于 open 状态时自动生效，且无法手动添加或复用到自定义弹窗、Modal、Toast 等非原生 <dialog></dialog> 结构中。
为什么 ::backdrop 对大多数对话框无效
浏览器只会在原生 <dialog></dialog> 元素调用 .showModal() 后，自动在它前面插入一个匿名的、不可见的遮罩层，并允许你用 ::backdrop 选中并样式化它。这个机制不触发于任何 div、section 或 class 名为 modal 的元素。
- 写了
.my-dialog::backdrop { background: rgba(0,0,0,0.5); }？没用，选择器根本匹配不到任何节点 - 给
<div class="dialog"> 加 <code>open属性？HTML 规范不识别，属性被忽略 - 试图用 JS 手动创建
::backdrop？CSS 伪元素不能通过 DOM 操作生成，只能由浏览器按规则注入
<dialog></dialog> 原生组件下 ::backdrop 的正确用法
只有当你真正使用语义化 <dialog></dialog> 标签，并调用其内置方法时，::backdrop 才可用：
<dialog id="myDialog"><p>这是对话框内容</p>
<button onclick="this.closest('dialog').close()">关闭</button>
</dialog><button onclick="myDialog.showModal()">打开对话框</button>
<style>
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
animation: fade-in 0.2s ease-out;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
- 必须用
.showModal()（不是.show()），否则::backdrop不渲染 -
::backdrop默认无样式，不设background-color就是全透明，看起来像“没遮罩” - 它天然使用
position: fixed，铺满整个视口，无需手动写top/left/width/height - 不支持
z-index（它总在<dialog></dialog>下方、页面内容上方，层级已固定）
自定义对话框该用什么替代方案
95% 的项目用的是封装好的 Modal 组件（如 Ant Design、Element Plus、或手写的 <div class="modal">），这时必须放弃 <code>::backdrop，改用显式遮罩层：
- 加一层
<div class="modal-overlay">，设 <code>position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 1000; - 或者更轻量：用伪元素
.modal::before，配合position: relative和inset: 0 - 确保遮罩层有
pointer-events: auto（默认值），否则点击会穿透到底层 - 避免父容器有
opacity、transform或filter，否则会截断遮罩的层叠上下文，导致z-index失效
真正容易被忽略的点是：即使你用了 <dialog></dialog>，如果在它外层包裹了 opacity: 0.99 的容器，或对 做了 transform: translateZ(0)，::backdrop 的渲染和事件捕获仍可能异常——它的行为比看起来更“脆弱”。
