dialog::backdrop 仅在 dialog.showModal() 调用后生成，show()、open 属性或 HTML 中直接写 open 均无效；必须直挂 body、避开 transform/filter/overflow 隐藏祖先，且仅支持 background-color 和 backdrop-filter（需配 background-color），Firefox 不支持，需降级 fallback。
::backdrop 只在 dialog.showModal() 调用后才生成，其他方式（show()、open 属性、HTML 中直接写 open）均无效；不满足条件时所有样式都白写。
为什么写了 dialog::backdrop { background-color: rgba(0,0,0,0.5); } 却没效果？
根本原因不是 CSS 写错，而是 backdrop 节点压根没创建出来：
- 检查 JS 是否真的调用了
dialog.showModal()——show()不会触发 ::backdrop - 打开 DevTools → Elements 面板，搜索
::backdrop；搜不到就说明没渲染，别调样式了 -
<dialog></dialog>不能被transform、filter、will-change或overflow: hidden的祖先包裹，否则 backdrop 会被裁剪或消失 - 确保
<dialog></dialog>直接挂载在<body>下，避开 Ant Design、Element Plus 等 UI 库的容器封装
dialog::backdrop 支持哪些样式？哪些绝对别碰？
它是个受限的匿名盒子，浏览器只暴露极少数可样式化属性：
- ✅ 可靠支持：
background-color（唯一推荐的颜色控制方式） - ✅ 有限支持：
backdrop-filter（需同时写background-color才能触发，Safari 必加-webkit-backdrop-filter） - ❌ 完全无效：
z-index、pointer-events、opacity、transform、animation - ❌ 视觉风险：
background-image、linear-gradient()—— Safari 和部分安卓 WebView 会忽略，甚至导致backdrop-filter失效
推荐写法：dialog::backdrop { background-color: #0008; }（等价于 rgba(0,0,0,0.05)），透明度必须写进颜色值里，不能靠 opacity 模拟。
立即学习“前端免费学习笔记（深入）”；
如何安全兼容 Firefox 和旧版 Safari？
Firefox 至今（2026 年 10 月）仍不支持 ::backdrop 的任何样式；Safari 对 backdrop-filter 的支持也受限。不能靠 @supports (backdrop-filter: blur(1px)) 判断。
正确检测方式是：
@supports selector(::backdrop) and (background-color: #0008) {
dialog::backdrop {
background-color: #0006;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
}
降级方案必须主动提供：
- 插入同级 DOM：
<div class="backdrop-fallback"></div>，用position: fixed; inset: 0; z-index: 9998;模拟遮罩 - 核心交互逻辑（如点击关闭）必须由 JS 控制 fallback 元素的显隐，不能依赖 ::backdrop 的默认行为
- 如果项目需支持 Firefox，::backdrop 只能当视觉增强项，不可作为功能依赖
最容易被忽略的一点：blur 值超过 10px 后，低端设备易卡顿，文字可读性也明显下降；真机测试前务必确认模糊值在 6px–8px 区间内。
