::backdrop未生效最常见原因是目标元素未触发全屏或模态状态；它仅在fullscreen元素、showmodal()调用的或原生模态（如alert）中渲染，普通fixed遮罩不触发。
为什么 ::backdrop 没有生效
最常见原因是目标元素没触发“全屏”或“模态”状态——::backdrop 只在 fullscreen 元素、<dialog></dialog> 打开时、或某些浏览器原生模态（如 alert()）下才渲染，普通 position: fixed 遮罩层完全不触发它。
检查是否误以为任意遮罩都能用 ::backdrop：它不是通用背景覆盖层，而是浏览器为特定“系统级模态上下文”自动插入的伪元素。
- 对
<dialog></dialog>，必须调用showModal()（不是show()），否则::backdrop不激活 - 对全屏元素，需通过
element.requestFullscreen()进入，CSS 的fullscreen伪类也不等于::backdrop - Chrome 113+ 才支持
<dialog></dialog>的::backdrop；Safari 目前（2024）仍不支持<dialog></dialog>的::backdrop，仅支持全屏场景
::backdrop 样式写在哪才有效
必须用足够优先级的规则匹配到伪元素本身，且不能被父容器的 overflow: hidden 或 transform 截断。
- 选择器必须显式包含伪元素：
dialog::backdrop、:fullscreen::backdrop，写成dialog::backdrop, ::backdrop会导致后者无效（无宿主元素） - 确保没有更早定义的
background覆盖了它，例如dialog { background: white; }不影响::backdrop，但若写了dialog::backdrop { background: none; }就真看不见了 - 避免给
<dialog></dialog>父容器设transform（如scale(0.9)），这会让 backdrop 渲染区域错位甚至不可见
调试 ::backdrop 是否被创建
它不会出现在 DOM 树中，但可在 DevTools 的“Styles”面板里手动输入选择器查看是否匹配成功，或用 JS 检测是否处于模态状态。
