dialog::backdrop 是标准写法，Chrome 97+、Firefox 99+、Safari 15.4+ 支持，需配合 open 状态使用并显式设置 background 和 opacity；不支持时可用 dialog[open]::before 模拟遮罩。
dialog.showModal() 的遮罩层无法直接用 CSS 选中
原生 <dialog> 调用 showModal() 后，浏览器会自动插入一个半透明黑色遮罩（backdrop），但它不是 DOM 元素，而是渲染层的合成效果——所以你写 .dialog::backdrop 或 dialog::backdrop 是无效的，除非用对了伪元素语法且浏览器支持。
::backdrop 伪元素必须配合 open 属性使用
::backdrop 只在 <dialog open> 状态下生效，showModal() 会动态添加 open 属性，但这个过程是同步的，CSS 能捕获。关键点是：必须写成 dialog[open]::backdrop 或更稳妥的 dialog::backdrop（现代浏览器支持），且不能遗漏 background 和 opacity 的组合控制。
-
dialog::backdrop是标准写法，Chrome 97+、Firefox 99+、Safari 15.4+ 支持 - 旧版 Safari 需要
dialog[open]::backdrop，但实际兼容性仍差，建议降级 fallback - 只设
background: rgba(0, 0, 0, 0.8)不够，必须显式设opacity: 1，否则部分浏览器会叠加默认透明度
常见失效原因和绕过方案
如果 dialog::backdrop 没生效，大概率是以下之一：
- 浏览器不支持：
dialog本身或::backdrop未启用（如旧 Edge、Android WebView） - CSS 优先级被覆盖：检查是否有更高权重的选择器重置了
background - 漏写了
open属性触发时机：showModal()立即加open，但 CSS 必须已就绪；避免 JS 动态插入 style 标签太晚 - 想改遮罩“颜色”但只调
rgba()里的 alpha 值：其实背景色可任意，比如background: rgba(128, 0, 128, 0.6)就是紫灰遮罩
实在不兼容时，手动模拟遮罩：在 <dialog> 外层套一个 <div class="dialog-backdrop">，JS 调用 showModal() 前显示它，监听 close 事件后隐藏——但要注意 z-index 层级必须低于 dialog 本体、高于页面内容。
立即学习“前端免费学习笔记（深入）”；
完整可用示例（含 fallback）
dialog::backdrop {
background: rgba(33, 150, 243, 0.7); /* 蓝色遮罩 */
opacity: 1;
}
/* 兜底：老浏览器 fallback */
dialog[open] {
position: relative;
}
dialog[open]::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(33, 150, 243, 0.7);
z-index: 999;
pointer-events: none;
}注意：伪元素 ::before 方案里 pointer-events: none 很关键，否则会拦截 dialog 内部点击；真正的 ::backdrop 自带该行为，不用额外处理。
真正麻烦的不是怎么写，而是确认当前运行环境是否真支持 ::backdrop —— 建议用 if ('showModal' in HTMLDialogElement.prototype) 判断后再决定走哪条路径。
