dialog::backdrop 样式没生效的根源是未调用 showModal()，只有 showModal() 才生成 backdrop 匿名盒；正确写法为 dialogEl.showModal() 配合 dialog::backdrop 选择器，且仅支持 background-color、opacity、backdrop-filter 等有限样式。
dialog::backdrop 样式没生效？先确认是否调用了 showModal()
绝大多数“遮罩不显示”问题，根源不是 CSS 写错，而是 JS 没走对路。showModal() 和 show() 行为完全不同：show() 只是让 <dialog></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></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></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直接绑定事件 —— 它是伪元素，无法添加事件监听器
移动端尤其要注意：iOS Safari 和部分安卓 WebView 中，::backdrop 对 touch 事件响应不稳定，可加 touch-action: auto 缓解。
为什么遮罩没盖住整个页面？
::backdrop 的覆盖范围受父容器影响。如果 <dialog></dialog> 的某个祖先元素设置了 isolation: isolate、transform、will-change 或 overflow: hidden，可能截断 backdrop 的绘制区域，导致背景色“消失”或只覆盖局部。
更隐蔽的问题是：某些旧版 Chromium（如 Chrome 98–102）对 background-blend-mode 完全忽略；Safari 对 backdrop-filter 的支持仍不稳定，即使写了 @supports，也可能因未同时声明 background-color 而静默失效。
真正稳定可控的全屏遮罩方案：放弃依赖 ::backdrop 做核心视觉效果，尤其当你要模糊、渐变、或适配旧浏览器时。最可靠的做法是用一个独立 <div id="backdrop-blur"> 覆盖视口，再把 <code><dialog></dialog> 放它上面。
