::backdrop 仅在 showModal() 调用时生效，show() 或 open 属性不创建 backdrop 层；需用 background-color 设置遮罩，避免渐变；fixed 元素被遮不住因堆叠上下文分离，应将其纳入 dialog 上下文或改用内部结构。
dialog 元素打开时 ::backdrop 不生效？
根本原因通常是 <dialog></dialog> 没有真正“显示”——它必须通过 showModal() 调用，而不是 show() 或仅靠 open 属性。只有 showModal() 会触发浏览器创建 backdrop 层，::backdrop 才有作用对象。
常见错误现象：::backdrop 样式写了但完全没反应，开发者反复检查选择器拼写、z-index、opacity，却漏掉了这个前提条件。
-
<dialog open></dialog>+ CSS::backdrop→ 无效（无 backdrop 节点） -
dialog.showModal()→ 有效（浏览器插入<::backdrop></::backdrop>匿名元素） - 用
dialog.close()关闭后，backdrop 自动移除，无需手动清理
怎么给 ::backdrop 加背景遮罩效果？
它本质是一个覆盖全视口的伪元素，但默认透明，且不继承父元素样式。直接设 background-color 最稳妥，避免用 background-image 或渐变——部分浏览器（如 Safari 16.4 前）对 backdrop 的背景渲染支持不一致。
性能提示：backdrop 层是合成层（composited），加 opacity 或 filter 可能触发重绘，简单半透黑最轻量。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
dialog::backdrop { background-color: rgba(0, 0, 0, 0.5); } - 慎用：
dialog::backdrop { background: linear-gradient(...); }（Firefox 支持，Safari 可能回退为纯色） - 别依赖
inherit：::backdrop不继承 dialog 元素的background或color
为什么 backdrop 遮不住固定定位元素？
因为 ::backdrop 的堆叠上下文（stacking context）在 <dialog></dialog> 内部，而 position: fixed 元素通常相对于视口定位，可能位于 backdrop 的 z-axis 下方或同级。关键不是 z-index 数值大小，而是堆叠上下文层级关系。
解决思路不是盲目调高 backdrop 的 z-index，而是确保 fixed 元素被包含在 dialog 的 stacking context 中，或者主动提升其上下文。
- 最简方案：给
<dialog></dialog>加position: relative; z-index: 1000;，再给 fixed 元素加z-index: 999;（让它被 dialog 的上下文包裹） - 更可靠做法：避免在 modal 场景中使用独立 fixed 元素；把需要随 dialog 显示/隐藏的 UI 放进
<dialog></dialog>内部 - 注意：Chrome 115+ 对 backdrop 的 stacking 行为有调整，旧写法可能突然失效
Safari 和旧版 Chrome 的兼容性坑
::backdrop 在 Safari 15.4+ 和 Chrome 97+ 才稳定支持，且 Safari 对 pointer-events 和过渡动画的支持仍有限制。比如 transition: background-color 0.3s 在 backdrop 上基本无效。
真实报错不会抛出 JS 异常，但 DevTools 里能看到规则被标记为 “invalid” 或直接不应用。
- 检测是否支持：
CSS.supports('selector(::backdrop)')（注意括号和引号） - 降级方案：用 JS 动态插入一个
<div class="dialog-backdrop">，并手动控制显隐 <li>别用 <code>@supports (backdrop-filter: blur(1px))检测::backdrop——这是两个不同特性
最易被忽略的一点：backdrop 的尺寸始终是视口大小，哪怕 dialog 内容溢出滚动，它也不会随内容高度变化。如果页面有横向滚动条，backdrop 可能漏掉右侧窄条——这不是 bug，是规范行为。
