::backdrop仅在dialog.showModal()调用后生成，否则伪元素不存在；仅支持background-color（需含alpha）和有限backdrop-filter，禁用z-index/width/height等；Firefox至今不支持，需降级fallback方案。
::backdrop 只在 dialog.showModal() 调用后才生成，写再多 CSS 也白搭——没调这个方法，伪元素根本不存在，样式不会应用。
为什么写了 dialog::backdrop 却完全没反应
不是选择器错了，也不是浏览器不支持，而是 ::backdrop 还没被创建。它只在 dialog.showModal() 执行瞬间由浏览器合成，其他任何方式都不触发：
-
dialog.show()—— 不生成，仅显示非模态弹窗 -
dialog.open = true或<dialog open></dialog>—— 不生成，只是设了 open 状态 - DevTools Elements 面板搜不到
::backdrop？说明 JS 没走到.showModal()这一步 - 选择器必须是
dialog::backdrop，.modal-dialog::backdrop或dialog:not([open])::backdrop全部无效
dialog::backdrop 能设哪些样式，哪些绝对别碰
它不是真实 DOM 节点，而是浏览器在合成层绘制的固定视觉层，样式支持极窄：
- ✅ 安全可用：
background-color（必须含 alpha，如#0006或rgba(0,0,0,0.4)） - ✅ 有条件可用：
backdrop-filter（Chrome/Edge 稳定；Safari 16.4+ 实验性；Firefox 至今不渲染）；需搭配-webkit-backdrop-filter - ❌ 完全无效：
z-index、width、height、top、left、transform、opacity、pointer-events - ⚠️ 高风险：
background-image、linear-gradient()—— Safari 和部分安卓 WebView 会静默降级为纯黑或透明，遮罩“消失”
如何实现淡入动画并兼容 Firefox/Safari
直接对 [open] 属性加 transition 在 Firefox 中无效，得用 class 控制时机：
立即学习“前端免费学习笔记（深入）”；
- JS 调用前先加类：
dialog.classList.add('is-open')，再执行dialog.showModal() - CSS 写成：
dialog.is-open::backdrop { background-color: rgba(0,0,0,0.45); transition: background-color 0.25s ease; } - Firefox 不支持
::backdrop，必须降级：@supports not selector(::backdrop) { /* 插入同级 <div class="backdrop-fallback"> */ }<li>Safari 对点击 backdrop 关闭响应不稳定，需手动监听：<code>dialog.addEventListener('click', e => e.target === dialog && dialog.close())，且关闭后补一句dialog.focus()防止焦点丢失
最易被忽略的是：它盖不住 position: fixed 元素。导航栏、悬浮按钮若用了 fixed，大概率会穿透遮罩——这不是 z-index 能解决的，因为 ::backdrop 的堆叠上下文和 fixed 元素不在同一层级。真要遮住，要么把 fixed 元素移进 <dialog></dialog> 内部，要么放弃 ::backdrop，改用显式 <div class="backdrop"> + 手动焦点管理。</div>
