<dialog>元素默认无遮罩层，需用dialog::backdrop伪元素手动添加；它仅在showModal()调用后生效，需配合fixed定位和背景色，且IE及旧版Safari不支持。
dialog 元素默认不带遮罩层
HTML <dialog> 原生元素本身没有「模态遮罩层」（即背后的半透明灰色蒙版），它只控制自身显示/隐藏和焦点行为。浏览器实现中，showModal() 会自动阻止底层交互，但视觉上不会添加任何 backdrop —— 这不是 bug，是规范设计如此。
所以你看到页面内容依然清晰可见、无灰度覆盖，不是样式没生效，而是根本没这层 DOM 或默认样式。
用 ::backdrop 伪元素手动加遮罩
::backdrop 是唯一被标准支持的、专用于 <dialog> 模态状态下的遮罩层样式钩子。它只在 showModal() 调用后存在，且必须配合 position: fixed 和显式背景色才能生效。
-
::backdrop不是子元素，不能用 JS 查询或操作，只能通过 CSS 控制外观 - 必须写全选择器：
dialog::backdrop，单独写::backdrop无效 - 若遮罩不出现，请检查是否漏了
dialog.showModal()（而非show()） - 常见写法：
dialog::backdrop { background-color: rgba(0, 0, 0, 0.5); }
IE 和旧版 Safari 不支持 dialog 和 ::backdrop
Firefox 从 91+、Chrome 37+、Edge 79+ 支持 <dialog> 和 ::backdrop；Safari 直到 15.4 才开始支持 ::backdrop，且早期版本仅支持 showModal() 无遮罩。IE 完全不支持。
立即学习“前端免费学习笔记（深入）”；
如果你需要兼容 Safari <div class="modal-backdrop"> + JS 控制，原生方案此时不可靠。
z-index 和 stacking context 容易踩坑
::backdrop 默认渲染层级低于 <dialog>，但高于页面其他内容。不过一旦父容器有 transform、opacity < 1 或 will-change，就可能创建新的 stacking context，导致遮罩被盖住。
- 最稳妥做法：确保
<dialog>是<body>的直接子节点 - 避免在
<dialog>外层套有transform的 wrapper - 遮罩层级由浏览器控制，不要给
::backdrop设z-index—— 它会被忽略
