dialog::backdrop样式没生效的主因是未调用showmodal()；仅show()或open属性不触发backdrop渲染，且必须用dialog::backdrop选择器，支持background-color、opacity、backdrop-filter等有限样式，禁用z-index等布局属性。
dialog::backdrop 样式没生效？先确认是否调用了 showModal()
绝大多数“遮罩不显示”问题，根源不是 CSS 写错，而是 JS 没走对路。showModal() 和 show() 行为完全不同：show() 只是让 dialog 可见，不创建 backdrop 层，DevTools 里根本查不到 ::backdrop 节点；open 属性或 HTML 中写 <dialog open></dialog> 同样无效——浏览器只在 showModal() 调用后才生成 backdrop 匿名盒。
常见错误包括：
- 直接在 HTML 里写
<dialog open></dialog>，然后只靠 CSS 试图控制::backdrop—— 完全无效 - JS 中写了
dialog.show()，但没调showModal() - 选择器写成
.modal::backdrop或::backdrop（缺dialog前缀），浏览器直接忽略
✅ 正确做法：确保 JS 显式调用 dialogEl.showModal()，且 CSS 使用 dialog::backdrop（带标签限定）。
dialog::backdrop 能设哪些样式？别碰 z-index 和布局属性
::backdrop 是一个合成层伪元素，浏览器强制将其渲染在 dialog 下方、其他内容上方，不参与常规层叠上下文。能安全使用的属性很有限：
-
background-color（最常用，推荐用rgba(0,0,0,0.5)或#0008简写） -
opacity（慎用，部分浏览器会与background-color叠加出意外灰度） -
backdrop-filter（如blur(4px)，需配background-color才稳定生效） -
mix-blend-mode（适合深色/浅色主题叠加效果） -
filter（如grayscale(20%)，但性能开销略高）
❌ 避免：z-index、position、margin、padding、display —— 它们要么被忽略，要么导致不可预测行为。
点击 backdrop 关闭 dialog？得手动监听，浏览器不默认支持
标准行为中，::backdrop 默认 pointer-events: none，点击它不会触发任何事件，更不会自动关闭。必须显式处理：
- 给
dialog::backdrop设置pointer-events: auto（注意 Safari 16.4+ 才支持该设置） - 监听
dialog元素的click事件，检查event.target === dialog（即点在 backdrop 区域） - 避免在 dialog 内部元素上调用
event.stopPropagation()，否则 click 无法冒泡上来 - 不要对
dialog::backdrop直接绑定事件 —— 它是伪元素，无法添加事件监听器
移动端尤其要注意：iOS Safari 和部分安卓 WebView 中，::backdrop 对 touch 事件响应不稳定，可加 touch-action: auto 缓解。
为什么遮罩没盖住整个页面？dialog 的挂载位置和祖先样式才是关键
::backdrop 的渲染范围由 <dialog></dialog> 的定位上下文决定，它**只覆盖 dialog 自身背后区域**，不保证全屏——若 dialog 嵌套在 transform、filter 或 contain: layout 的容器里，backdrop 会被截断，只盖住局部。
- 必须将
<dialog></dialog>直接挂载到下，避免任何祖先元素带transform、perspective或filter - 给
dialog加position: fixed并手动设inset: 0，否则::backdrop尺寸不可控 - 第三方 UI 库（如 Ant Design）的
z-index常设在 2000+，而::backdrop默认堆叠层级远低于此，遮罩容易被菜单、通知框盖住
真正要全屏遮罩 + 可靠交互拦截，还是得用传统 <div class="overlay">；<code>::backdrop 只适合做视觉微调，比如轻微压暗或毛玻璃质感。
