::backdrop仅在dialog调用showModal()时生效，需确保dialog为顶层元素、未被overflow/transform等截断，且仅支持background、opacity等有限样式属性。
::backdrop 只在 <dialog></dialog> 元素调用 showModal() 时自动生效，不能手动触发、不能作用于其他元素，也不支持伪类链式写法（比如 dialog:open::backdrop 是无效的）。
为什么 ::backdrop 没效果？常见原因
最常踩的坑是：没调用 showModal() —— show() 不会激活 ::backdrop，只有模态态才渲染遮罩层。另外，<dialog></dialog> 必须是文档流中的顶层元素（不能被 transform、filter 或 will-change 等属性包裹），否则 backdrop 渲染会被截断或完全不显示。
-
<dialog></dialog>没加open属性，且未执行dialog.showModal() - 父容器设置了
overflow: hidden或clip-path，遮罩被裁剪 - CSS 中对
dialog设了position: absolute且脱离了根层叠上下文 - 使用了
dialog:not([open])::backdrop这类选择器——::backdrop本身只在模态打开时存在，:not([open])条件永远不匹配
::backdrop 的样式限制和可用属性
它是一个“合成层伪元素”，浏览器强制将其绘制在 <dialog></dialog> 下方、整个视口上方，因此仅支持部分 CSS 属性。背景、透明度、混合模式可安全使用；布局、尺寸、定位类属性基本无效。
- ✅ 支持：
background、background-color、opacity、mix-blend-mode、filter（如blur(2px)） - ❌ 不支持：
width/height、top/left、margin/padding、transform、display（始终为block） - ⚠️ 注意：
z-index无意义——它的层叠层级由浏览器固定（总在 dialog 下、body 上），不能被自定义覆盖
实用示例：半透毛玻璃遮罩
这是目前最稳妥的视觉方案，兼容 Chrome 97+、Edge 97+、Safari 15.4+（Firefox 尚未支持 ::backdrop，需降级 fallback）。
立即学习“前端免费学习笔记（深入）”；
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
关键点：
- 必须同时写
background-color和backdrop-filter，否则 Safari 可能不渲染模糊效果 -
backdrop-filter在部分安卓 WebView 或旧版 Safari 中失效，建议搭配@supports做渐进增强 - 避免用
background: linear-gradient(...), url(...)复合背景——某些浏览器会丢弃backdrop-filter
真正要注意的是：当页面本身有滚动、fixed 元素或 CSS 容器查询时，::backdrop 的渲染边界可能意外收缩。如果发现遮罩只盖住部分屏幕，优先检查 <dialog></dialog> 是否被某个 contain: layout 或 overflow-anchor: none 的祖先截断了层叠上下文。
