dialog::backdrop样式不生效，90%是因为未调用showModal()；只有showModal()才会生成该伪元素，且必须用dialog::backdrop选择器，仅支持background、backdrop-filter等有限样式，不支持z-index、position等布局属性。
dialog::backdrop 样式不生效？90% 是因为没调用 showModal()，而不是 CSS 写错了。
为什么 dialog::backdrop 一点反应都没有
浏览器只在 dialog.showModal() 执行后、dialog.close() 前这一瞬间生成 ::backdrop 这个匿名伪元素；其他任何方式都不会触发它：
-
dialog.show()或dialog.open = true—— 只显示 dialog，无遮罩、不锁焦点、ESC 不响应 -
<dialog open>—— 等价于show()，同样不会生成 backdrop - DOM 尚未加载完成就调用
showModal()—— 报错Cannot read property 'showModal' of null，JS 中断，根本走不到那一步 - CSS 选择器写成
::backdrop或.modal::backdrop—— 必须是dialog::backdrop，缺一不可
dialog::backdrop 能设哪些样式、哪些绝对别碰
::backdrop 是浏览器硬合成的全屏层，不参与常规盒模型，很多 CSS 属性直接被忽略：
- ✅ 安全可用：
background（推荐rgba(0, 0, 0, 0.5)或#0006）、backdrop-filter（必须搭配非透明background才生效）、filter（如grayscale(10%)） - ⚠️ 慎用：
opacity—— 它会作用在整个dialog元素上，连内部按钮都变透明，不是只调遮罩 - ❌ 一律无效：
width/height、top/left、margin/padding、transform、z-index、display、border
想加毛玻璃效果？必须这样写：
立即学习“前端免费学习笔记（深入）”；
dialog::backdrop {
background: rgba(0, 0, 0, 0.01); /* 关键：不能是 transparent */
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}怎么让点击遮罩层关闭 dialog
浏览器默认不支持点击 ::backdrop 关闭 —— 因为它的 pointer-events 默认是 none，且它不是真实 DOM 节点，无法直接绑定事件：
- 不能给
dialog::backdrop加onclick，它不响应事件监听 - 正确做法：监听
dialog自身的click事件，判断e.target === dialog - 注意不要在 dialog 内部元素上调用
e.stopPropagation()，否则 click 无法冒泡上来 - 移动端 Safari 对
pointer-events: auto支持不稳定，建议优先用 click 冒泡方案
示例逻辑：
dialog.addEventListener('click', (e) => {
if (e.target === dialog) {
dialog.close();
}
});兼容性与容易被忽略的细节
Firefox 至今不支持 dialog::backdrop；Safari 15.4+ 开始支持但 backdrop-filter 渲染极不稳定；Chrome/Edge 97+ 最稳。真正麻烦的是：
- 不能只靠
@supports selector(::backdrop)做降级 —— 需配合@supports (backdrop-filter: blur(1px))分层检测 -
background-image或复杂linear-gradient在旧版 Safari 会直接回退为透明，遮罩“消失” -
dialog内部表单按 Enter 默认提交，不是关闭 dialog —— 这常被误认为“遮罩失效”，实际和 backdrop 无关 -
::backdrop是伪元素，没有offsetWidth、不能getBoundingClientRect()、也不能用e.target直接拿到它
