::backdrop仅对showmodal()打开的dialog生效，safari不支持，需用@supports检测；其样式需显式设置background且不可依赖默认值，z-index无效，避免transform/filter，兼容方案为inert+手动backdrop元素。
对话框全屏时::backdrop不生效？先确认dialog是否已showModal()
伪元素 ::backdrop 只对调用 showModal() 打开的 <dialog></dialog> 生效，用 show() 或 CSS display: block 模拟的对话框完全不会触发它。浏览器根本不会渲染这个伪元素——不是样式没写对，是压根没生成。
-
showModal()会自动添加 backdrop 并阻塞交互，这是前提 -
dialog:not([open])状态下::backdrop也不存在，别在关闭态里调试它 - Safari 目前（v17.4+）仍不支持
::backdrop，需用@supports selector(::backdrop)安全包裹
::backdrop 样式被忽略？检查层叠顺序和透明度
即使 dialog 正确调用 showModal()，::backdrop 也可能“看不见”：它默认是半透黑色（rgba(0,0,0,0.2)），但若父容器有 background-color 或 overflow: hidden 截断，或你写了 background: none 却忘了设 opacity，它就彻底隐身。
- 必须显式设置
background（哪怕只是background: #0006），不能依赖默认值 -
z-index对::backdrop无效——它永远在<dialog></dialog>下方、页面内容上方，层级固定 - 避免在
::backdrop上用transform或filter，部分浏览器（如旧版 Chrome）会意外禁用 backdrop 渲染
想兼容 Safari 或老版本 Chrome？用 inert + 手动 backdrop 元素
原生 ::backdrop 的兼容性缺口目前没法绕过。Safari 不支持，Firefox 早期版本只支持部分属性。真要全平台一致表现，得放弃伪元素，改用显式 DOM 结构：
```html <div class="dialog-backdrop" inert><dialog class="real-dialog">...</dialog></div> ```
-
inert属性让 backdrop 外部区域失焦且不可交互，模拟原生行为 - 手动控制
.dialog-backdrop的display和z-index，比伪元素更可控 - 注意：
inert在 IE 和部分旧安卓 WebView 中无效，需搭配aria-hidden="true"和焦点捕获逻辑
性能提示：别在 ::backdrop 里加动画或模糊滤镜
::backdrop 是浏览器底层合成层绘制的，但一旦加上 backdrop-filter: blur(4px) 或 animation: fade-in 0.3s，某些低端设备会出现明显卡顿，甚至触发整页重绘。
立即学习“前端免费学习笔记（深入）”；
- 模糊效果优先用
backdrop-filter而非filter，前者专为 backdrop 优化 - 动画建议只作用于
<dialog></dialog>自身，::backdrop保持静态或仅做opacity过渡 - 测试时关掉开发者工具的 “Rendering > Paint flashing”，看 backdrop 是否频繁重绘
真正难处理的是多层模态叠加时 backdrop 的堆叠逻辑——浏览器没定义行为，各实现不一致，这种场景干脆别依赖 ::backdrop，手动管理 backdrop 元素的显示优先级更稳妥。
