dialog::backdrop 无效的主因是未调用 showModal()，而 open 属性、show() 或 DOM 未挂载均不触发该伪元素；video::backdrop 与之无关；backdrop-filter 在 Safari/Firefox 中不支持；稳定方案是手动创建 fixed 遮罩层。
dialog::backdrop 在全屏弹窗时没效果？先确认是否真调用了 showModal()
绝大多数“样式不生效”问题，根源不是 CSS 写错，而是 dialog.showModal() 根本没执行——show()、open 属性、或 display: block 都不会触发 ::backdrop 渲染。浏览器压根不生成这个伪元素，DevTools 里都找不到节点。
常见错误场景：
-
<dialog open>+dialog::backdrop { background: red; }→ 完全无效 - JS 中只写了
dialog.show()→ 无 backdrop 层 -
dialog元素尚未插入 DOM（比如在组件挂载前就调用showModal()）→ 静默失败
video::backdrop 和 dialog::backdrop 是两套机制，别混用
全屏视频的背景由 video::backdrop 控制，和 dialog::backdrop 无关。前者是全屏 API 触发的 UA 伪元素，后者是 <dialog> 的模态层专用伪元素。两者选择器、生效条件、支持属性都不互通。
如果你在调试全屏视频黑边问题，直接写：
立即学习“前端免费学习笔记（深入）”；
video::backdrop {
background-color: #1a1a1a;
}
而不是去动 dialog 相关规则。反过来，想给对话框加遮罩，也别往 video 上套 ::backdrop —— 它不会响应。
backdrop-filter 在 dialog::backdrop 上失效？不是 bug，是规范限制 + 浏览器现状
backdrop-filter 在 dialog::backdrop 上长期不可靠，根本原因有二：一是 CSS 规范明确限定该属性只能作用于「自身背景可被用户看到」的元素，而 ::backdrop 是合成层（composited overlay），不参与常规渲染流水线；二是浏览器支持极不统一。
当前（2026 年中）真实兼容性：
- Chrome 120+、Edge 120+：支持
dialog::backdrop上的backdrop-filter - Safari：仍不支持（v17.4+ 仍未解禁）
- Firefox：至今不支持（v115+ 仍无
backdrop-filteron::backdrop）
所以，哪怕你写了：
dialog::backdrop {
backdrop-filter: blur(8px);
background: rgba(0,0,0,0.4);
}
在 Safari 或 Firefox 里，backdrop-filter 行依然会被 DevTools 灰色划掉，且毫无模糊效果。
真正稳定可控的全屏遮罩方案：手动创建 fixed 背景层
放弃依赖 ::backdrop 做核心视觉效果，尤其当你要模糊、渐变、或适配旧浏览器时。最可靠的做法是用一个独立 <div id="backdrop-blur"> 覆盖视口，再把 <dialog> 放它上面。
关键实操点：
-
#backdrop-blur必须设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，不能靠inset: 0（Safari 对 inset 的解析不稳定） - 必须显式设
background（哪怕rgba(0,0,0,0.01)），否则backdrop-filter在 Safari 下会静默失效 -
<dialog>要设position: relative或z-index: 9999，确保浮在模糊层之上 - JS 控制时机：在
dialog.showModal()前，用backdropBlusEl.style.display = 'block'显示遮罩；关闭后监听close事件再隐藏
这个方案绕过了所有浏览器对 ::backdrop 的实现差异，也避免了堆叠上下文截断、fixed 元素穿透等诡异问题。真正难的不是写代码，而是接受：原生伪元素 ≠ 可靠 UI 基建。
