dialog 元素的 ::backdrop 默认不生效，因必须调用 showModal() 才渲染；show() 或设 open 属性无效，且 backdrop 仅在 showModal() 至 close() 间存在，CSS 设置需匹配浏览器兼容性与渲染特性。
dialog 元素的 ::backdrop 默认不生效？
因为 <dialog></dialog> 必须显式调用 showModal() 才会渲染 ::backdrop；用 show() 或直接设 open 属性不会触发。这是最常被忽略的前提——没弹出模态层，伪元素压根不存在。
-
::backdrop只在showModal()调用后、close()之前这一窗口期内可用 - 即使 DOM 中已有
open属性，若未调用showModal()，CSS 里写死dialog::backdrop { background: red }也看不到效果 - 检查是否误用了
show()：它只显示 dialog 框体，不遮罩背景，也不激活 backdrop
CSS 设置 ::backdrop 背景色无效的常见原因
不是所有颜色值都能如预期呈现——::backdrop 的渲染层级和合成行为有特殊性，尤其涉及透明度与混合模式时。
- 用
rgba(0, 0, 0, 0.5)比hsla()或color-mix()更可靠；部分浏览器对非rgb(a)的 alpha 解析不一致 - 如果父容器设置了
isolation: isolate或transform，可能截断 backdrop 的绘制区域，导致背景色“消失” - 某些旧版 Chromium（如 Chrome 98–102）对
::backdrop的background-blend-mode完全忽略，别白费劲 - 避免在
::backdrop上设background-image：多数浏览器仅支持纯色填充，图片会被静默丢弃
如何让 backdrop 颜色适配深色/浅色主题
不能靠媒体查询直接监听系统主题切换 backdrop 色——::backdrop 不响应 @media (prefers-color-scheme)。得换思路。
- 用 CSS 自定义属性动态控制：
dialog::backdrop { background: var(--backdrop-bg, #0004); }，再通过 JS 切换document.documentElement.style.setProperty('--backdrop-bg', 'rgba(255,255,255,0.7)') - 监听
matchMedia('(prefers-color-scheme: dark)')的change事件，在 dialog 弹出前预设变量值 - 注意：不要在
dialog.open后立刻改变量——backdrop 渲染有微小延迟，稳妥做法是在showModal()调用后加requestAnimationFrame再更新
Chrome/Firefox/Safari 对 ::backdrop 的兼容差异
别假设它和普通伪元素一样稳。Safari 15.4+ 才开始支持，且 backdrop 的 z-index 行为和其他浏览器不同。
立即学习“前端免费学习笔记（深入）”；
- Firefox 99+ 支持完整 backdrop 样式，但
background-clip和background-origin仍被忽略 - Chrome 96+ 支持，但 backdrop 的默认 opacity 是 0.7（不是 1），所以设
background: black看起来像灰黑，得显式写background: rgba(0,0,0,1) - Safari 15.4–16.4 中，
::backdrop无法响应pointer-events: none，点击 backdrop 总会触发close()，没法做“点击不关闭”的交互
