::backdrop仅在dialog.showmodal()调用后生成，其他方式无效；支持background-color和有限backdrop-filter，不支持z-index、opacity等；firefox不渲染需降级，safari兼容性差，且无法遮挡fixed元素。
::backdrop 只在 dialog.showModal() 调用后生效，其他方式（show()、open = true、<dialog open></dialog>）均不会生成该伪元素——写再多 CSS 也无效。
必须用 showModal() 才能触发 ::backdrop
这是所有问题的起点。DevTools 的 Elements 面板里搜不到 ::backdrop？先检查 JS 是否真的执行了 dialog.showModal()。常见错误包括：
- 误用
dialog.show()，它只显示 dialog，不创建 backdrop 层 - 在 React/Vue 中用状态控制
open属性，但没调用showModal() - 第三方 UI 库包裹了
<dialog></dialog>，导致调用被拦截或上下文丢失
验证方法：打开 DevTools → Elements → 点击 dialog 元素 → 在 Styles 面板中手动输入 dialog::backdrop，若无匹配样式提示，说明伪元素根本未生成。
dialog::backdrop 支持哪些样式？
它不是普通元素，而是浏览器合成层绘制的固定视觉层，仅接受极有限的声明：
- ✅ 安全可用：
background-color（推荐用#0008这类带 alpha 的十六进制，等价于rgba(0,0,0,0.05)） - ✅ 有条件可用：
backdrop-filter（Chrome/Edge 稳定；Safari 16.4+ 实验性支持；Firefox 至今不渲染） - ❌ 完全无效：
z-index、width、height、transform、pointer-events、opacity（设opacity: 0.5+background-color: #000在 Safari 中仍可能显示纯黑） - ⚠️ 高风险：
background-image、渐变、SVG —— Safari 和部分安卓 WebView 会静默降级为纯色甚至空白
最稳妥的写法：dialog::backdrop { background-color: #0006; }
动画与兼容性必须分开处理
::backdrop 上的 transition 或 @keyframes 在 Safari 和 Firefox 中支持极差，且无法可靠监听“关闭完成”时机：
- 淡入建议用
transition: background-color 0.3s ease，但需配合 class 切换（如dialog.is-open::backdrop），避免依赖[open]属性选择器（Firefox 不识别） - 点击 backdrop 关闭需手动监听：
dialog.addEventListener('click', e => e.target === dialog && dialog.close())，不能依赖默认行为 - Firefox 当前（2026年9月）完全不渲染
::backdrop，必须降级：@supports not selector(::backdrop) { /* 插入同级 <div class="backdrop-fallback"> */ }<li>Safari 对 <code>touchstart在 backdrop 上响应不稳定，可加dialog::backdrop { -webkit-tap-highlight-color: transparent; }减少误判
真正容易被忽略的是：backdrop 层无法遮挡 position: fixed 元素。导航栏、悬浮按钮依然可点击——这不是 bug，是规范行为。解决办法只能是把它们移出 body，或改用显式 overlay 元素。
