dialog::backdrop 样式未生效的首要原因是未调用 showModal()；只有该方法触发时浏览器才生成 ::backdrop 伪元素，show()、open 属性或 <dialog open> 均无效。
dialog::backdrop 样式没生效？先确认是否调用了 showModal()
绝大多数“遮罩不显示”或“CSS 不起作用”的问题，根源不是选择器写错，而是 dialogEl.showModal() 根本没执行。浏览器只在调用 showModal() 时才生成 ::backdrop 这个伪元素；show()、open 属性、甚至直接写 <dialog open> 都不会触发它——DevTools 里根本查不到 ::backdrop 节点。
常见错误包括：
- HTML 中写
<dialog open>，然后只靠 CSS 控制dialog::backdrop→ 完全无效 - JS 中调用了
dialog.show()，但漏了showModal() - 选择器写成
.modal::backdrop或::backdrop（缺dialog前缀）→ 浏览器直接忽略
dialog::backdrop 能设哪些样式？别碰 z-index 和布局属性
dialog::backdrop 是一个合成层伪元素，浏览器强制将其渲染在 <dialog> 下方、其他内容上方，不参与常规层叠上下文。能安全使用的样式非常有限：
-
background-color（最常用，推荐rgba(0, 0, 0, 0.4)或简写#0004） -
backdrop-filter（如blur(4px)，需配background-color才稳定生效） -
mix-blend-mode（适合深色/浅色主题叠加效果） -
filter（如grayscale(20%)，但性能开销略高）
以下属性要么被忽略，要么导致不可预测行为，务必避免：
立即学习“前端免费学习笔记（深入）”；
-
z-index、position、margin、padding、display -
width/height（它自动铺满视口，设了也无效） -
opacity（慎用，部分浏览器会与background-color叠加出意外灰度）
点击遮罩关闭弹窗？得手动监听，不能直接绑事件
标准行为中，dialog::backdrop 默认是 pointer-events: none，点击它不会触发任何事件，更不会自动关闭。必须显式处理：
- 给
dialog::backdrop设置pointer-events: auto（注意 Safari 16.4+ 才支持该设置） - 监听
<dialog>元素的click事件，检查event.target === dialogEl（即点在 backdrop 区域） - 避免在
<dialog>内部元素上调用event.stopPropagation()，否则click无法冒泡上来 - 不要对
dialog::backdrop直接绑定事件 —— 它是伪元素，无法添加事件监听器
移动端尤其要注意：iOS Safari 和部分安卓 WebView 中，::backdrop 对 touch 事件响应不稳定，可加 touch-action: auto 缓解穿透问题。
兼容性差时，dialog::backdrop 样式根本不起作用
旧版 Firefox（dialog-polyfill 环境）或 Safari（dialog::backdrop）中，你写的 CSS 完全被忽略——polyfill 是用额外 <div> 模拟遮罩的，不是伪元素。
检测是否可用：if ('showModal' in HTMLDialogElement.prototype)
不支持时，别只依赖 CSS；得手动插入遮罩 DOM 并控制其 class 或 style。真正跨浏览器统一遮罩样式，关键不在怎么写 CSS，而在判断「这个 backdrop 是浏览器画的，还是你代码画的」——后者你才有完全控制权。
