::backdrop 并非万能遮罩层，仅在 dialog.showModal() 调用后生效，且仅支持 background、opacity 和部分 filter，不响应 width、z-index 等盒模型属性，无法遮挡 position: fixed 元素，也不具备交互拦截能力。
::backdrop 在模态对话框中不是万能遮罩层，它只在特定条件下生效、仅支持有限样式，实际能用好的场景非常窄——绝大多数“想让它干的事”，它要么不支持，要么行为不可靠。
dialog::backdrop 只对 showModal() 有效
这是最常被忽略的前提。只要没调用 dialog.showModal()，::backdrop 就根本不会生成，连 DOM 节点都不会出现。用 dialog.show()、dialog.open = true 或 CSS display: block 模拟模态，::backdrop 全部无效。
- 调试时在 DevTools 里找不到
::backdrop节点？先检查 JS 是否真的执行了.showModal() -
dialog:not([open])::backdrop这类选择器永远不匹配——::backdrop不存在于关闭态 - Safari 17.4+ 仍不支持
::backdrop，需用@supports selector(::backdrop)包裹样式
能安全设置的样式只有 background、opacity 和部分 filter
::backdrop 是浏览器合成层绘制的固定层，不响应常规盒模型控制。你设 width、top、z-index、transform 都会被忽略。
- ✅ 安全写法：
dialog::backdrop { background-color: rgba(0, 0, 0, 0.5); } - ✅ 可用但需谨慎：
dialog::backdrop { backdrop-filter: blur(4px); }—— Chrome/Edge 支持，Safari 16.4+ 实验性支持，Firefox 至今（2026年5月）不支持 - ❌ 无效写法：
dialog::backdrop { width: 100%; height: 100vh; z-index: 9999; } - ⚠️ 渐变背景风险高：
background: radial-gradient(...)在 Safari 中可能回退为纯色，不建议依赖
它盖不住 position: fixed 元素
::backdrop 的堆叠上下文与 <dialog></dialog> 绑定，而 position: fixed 元素通常脱离文档流、相对于视口定位，很可能出现在 ::backdrop 层之下——哪怕你写了 z-index: 9999 也无效。
立即学习“前端免费学习笔记（深入）”；
- 常见现象：顶部导航栏、悬浮按钮依然可点击，遮罩“漏光”
- 无法通过提高
::backdrop的z-index解决（该属性对其无效） - 真正可行的方案：把需要遮挡的 fixed 元素移进
<dialog></dialog>内部，或改用显式<div class="overlay"> 替代 <h3>别指望它做交互拦截或视觉主导</h3> <p><code>::backdrop不是交互层。它默认pointer-events: none，不能响应点击，也不能阻止底层元素被触发。它本质只是个视觉修饰层，不是功能层。- 想禁用背景点击？必须额外加
inert属性或手动管理焦点，不能靠::backdrop - 想做淡入动画？可用
transition: background-color，但避免复杂@keyframes——低端设备易卡顿 - 性能敏感场景（如移动端），优先用纯色半透：
rgba(0,0,0,0.45)，而非backdrop-filter: blur()
真正稳定、可控、跨浏览器一致的方案，仍是手写一个
<div class="modal-backdrop">，配合 <code>inert和显式z-index控制。把::backdrop当作锦上添花的视觉微调项，而不是核心遮罩基础设施——这才是当前（2026年中）的实际工程底线。 - 想禁用背景点击？必须额外加
