dialog::backdrop 必须显式声明才生效，遮罩层颜色默认为黑是因为未定义该选择器；正确写法是 dialog::backdrop { background: rgba(0,0,0,0.4); }，且需注意 pointer-events 和浏览器兼容性。
dialog::backdrop 必须显式声明才生效
调用 showModal() 后遮罩层颜色还是黑的？不是浏览器没支持，而是你根本没写 dialog::backdrop 这个选择器。浏览器不会继承 dialog 元素的 background，也不会自动启用任何样式——它只提供一个空白的 backdrop 匿名盒，等着你用 CSS 填充。
常见无效写法：
-
dialog { background: rgba(0, 0, 0, 0.2); }—— 改的是弹窗本体，不是遮罩 -
::backdrop { background: #000; }—— 缺少dialog标签前缀，选择器不匹配 -
dialog::backdrop { opacity: 0.3; }——opacity会把整个dialog（含内部文字按钮）一起变透明
改颜色只能靠 background + rgba 或渐变
dialog::backdrop 可用的样式非常有限，background-color 是最稳妥、最通用的方式。必须带 alpha 通道，否则就成纯色“盖板”，失去遮罩意义。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
- 基础半透明灰：
dialog::backdrop { background: rgba(0, 0, 0, 0.4); } - 深蓝渐变：
dialog::backdrop { background: linear-gradient(135deg, #1e3c72, rgba(30, 60, 114, 0.6)); } - 带模糊（需额外条件）：
dialog::backdrop { background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(2px); }
注意：backdrop-filter 在 Safari 15.4+、Chrome 94+、Firefox 97+ 才可用，且依赖背后有真实内容可模糊；旧版 Firefox（哪怕用了 polyfill）根本不支持 ::backdrop，你的 CSS 会被完全忽略。
点击遮罩关闭 dialog 得手动处理
默认情况下，dialog::backdrop 的 pointer-events 是 none，点它什么都不会发生。想实现“点遮罩关闭”，不能直接给伪元素加事件监听器（做不到），而要：
- 在 CSS 中设
dialog::backdrop { pointer-events: auto; }（Safari 16.4+ 起支持） - 监听
dialog元素的click事件，检查e.target === dialogEl - 确保弹窗内部元素没调用
e.stopPropagation()，否则事件冒泡不到dialog上
移动端尤其要注意：iOS Safari 对 pointer-events: auto on ::backdrop 支持不稳定，部分 WebView 里 touch 事件可能不触发，建议 fallback 到按钮关闭或 Esc 键。
兼容性差时别硬扛，得自己接管遮罩
如果你的目标环境包括 Safari dialog::backdrop 就是徒劳。polyfill（如 dialog-polyfill）根本不会渲染 ::backdrop，它用的是额外 div 模拟遮罩层。
真正跨浏览器可控的做法是：
- 先检测原生支持：
if ('showModal' in HTMLDialogElement.prototype) - 不支持时，不用
dialog标签，改用div+ 手动插入遮罩层，并控制其background和z-index - 不要混用：既写
dialog::backdrop又指望 polyfill 生效，后者会直接忽略你的样式
遮罩层颜色看着是个视觉问题，实际是渲染链路控制权的问题——浏览器给你了接口，但没给你全部权限；什么时候该信它，什么时候得自己动手，才是关键分水岭。
