dialog::backdrop 样式没生效的首要原因是未调用 showmodal()，只有该方法才会生成 ::backdrop 伪元素；show()、open 属性或 均无效，且选择器必须为 dialog::backdrop，不可省略前缀。
dialog::backdrop 样式没生效？先确认是否调用了 showModal()
绝大多数“遮罩不显示”或“CSS 不起作用”的问题，根源不是选择器写错，而是 dialogEl.showModal() 根本没执行。浏览器只在调用 showModal() 时才生成 ::backdrop 这个伪元素；show()、open 属性、甚至直接写 <dialog open></dialog> 都不会触发它——DevTools 里根本查不到 ::backdrop 节点。
常见错误包括：
- HTML 中写
<dialog open></dialog>，然后只靠 CSS 控制dialog::backdrop→ 完全无效 - JS 中调用了
dialog.show()，但漏了showModal() - 选择器写成
.modal::backdrop或::backdrop（缺dialog前缀）→ 浏览器直接忽略
dialog::backdrop 能设哪些样式？别碰 z-index 和布局属性
dialog::backdrop 是一个合成层伪元素，浏览器强制将其渲染在 <dialog></dialog> 下方、其他内容上方，不参与常规层叠上下文。能安全使用的样式非常有限：
-
background-color（最常用，推荐rgba(0, 0, 0, 0.4)或简写#0004） -
opacity（慎用，部分浏览器会与background-color叠加出意外灰度） -
backdrop-filter（如blur(4px)，需配background-color才稳定生效） -
mix-blend-mode（适合深色/浅色主题叠加效果） -
filter（如grayscale(20%)，但性能开销略高）
以下属性要么被忽略，要么导致不可预测行为，务必避免：
-
z-index、position、margin、padding、display -
width/height（它自动铺满视口，设了也无效）
点击遮罩关闭弹窗？得手动监听，不能直接绑事件
标准行为中，dialog::backdrop 默认是 pointer-events: none，点击它不会触发任何事件，更不会自动关闭。必须显式处理：
- 给
dialog::backdrop设置pointer-events: auto（注意 Safari 16.4+ 才支持） - 监听
<dialog></dialog>元素的click事件，检查event.target === dialogEl（即点在 backdrop 区域） - 避免在
<dialog></dialog>内部元素上调用event.stopPropagation()，否则 click 无法冒泡上来 - 不要对
dialog::backdrop直接绑定事件 —— 它是伪元素，无法添加事件监听器（截至 2026 年 7 月）
想兼容旧浏览器或加模糊效果？放弃 ::backdrop，用 fixed 手动遮罩
backdrop-filter 在 dialog::backdrop 上长期不可靠：Chrome/Edge 120+ 支持，Safari 和 Firefox 至今不支持（v17.4 / v115+ 仍无解）。哪怕写了 backdrop-filter: blur(8px)，在 Safari 或 Firefox 里也会被 DevTools 灰色划掉。
真正稳定可控的方案是放弃依赖 ::backdrop 做核心视觉效果，尤其当你要模糊、渐变、或适配旧浏览器时：
- 用一个独立的
<div id="backdrop-blur"> 覆盖视口，设 <code>position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; - 再把
<dialog></dialog>放它上面，并确保z-index正确（遮罩层z-index: 999，dialogz-index: 1000） - 这样你可以自由控制背景色、模糊、动画、甚至渐变蒙版，且完全绕过浏览器对
::backdrop的限制
复杂点在于手动管理遮罩生命周期（显示/隐藏时同步控制 DOM 和 body 滚动），但换来的是确定性——这点比“看起来高级但随时失效”的伪元素更值得投入。
