dialog::backdrop样式不生效的根本原因是浏览器未生成该伪元素，仅当调用showModal()且dialog为body直接子元素、未被transform/overflow:hidden等属性包裹时才会创建；它仅支持background-color、opacity、backdrop-filter等有限样式，不支持width、z-index等盒模型属性，Firefox至今完全不支持，必须用同级div fallback降级。
dialog::backdrop 只在 showModal() 调用后才生成，不是写了样式就自动生效——这是你样式“没反应”的根本原因。
为什么 dialog::backdrop 样式完全不生效？
浏览器压根没创建这个伪元素节点，常见于以下情况：
- 用了
dialog.show()或直接设open属性，而不是showModal() -
<dialog></dialog>被包裹在transform、overflow: hidden、clip-path或will-change的祖先容器里（比如 Ant Design 的div.ant-modal-root） -
<dialog></dialog>没挂载在<body>下，而是嵌套在 position: absolute / fixed 的组件中 - 在 DevTools 的 Elements 面板里搜不到
::backdrop，说明它确实没生成
dialog::backdrop 支持哪些样式？哪些绝对别碰？
它是个合成层伪元素，浏览器强制铺满视口、固定层级，不支持常规盒模型控制：
- ✅ 安全可用：
background-color（最稳）、opacity、backdrop-filter（需配-webkit-backdrop-filter）、mix-blend-mode - ❌ 一律忽略：
width/height、top/left、margin/padding、transform、z-index、display（始终为block） - ⚠️ 高风险：
background-image、linear-gradient()—— Safari 16.4 前可能回退为透明，遮罩“消失”
如何写出兼容 Chrome / Safari / Firefox 的写法？
Firefox 截至 2026 年 9 月仍不支持 ::backdrop 任何样式；Safari 对 backdrop-filter 渲染极不稳定。不能靠 @supports backdrop-filter 判断，必须用：
立即学习“前端免费学习笔记（深入）”；
dialog::backdrop {
background-color: #0008;
}
@supports selector(::backdrop) and (background-color: #0008) {
dialog::backdrop {
background-color: #0006;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
}
同时提供 fallback：插入同级 <div class="backdrop-fallback">，用 position: fixed; inset: 0; z-index: 9998; 手动模拟，并由 JS 控制显隐 —— 这不是可选项，是 Firefox 必须走的路径。
动画和模糊值怎么设才不出问题？
::backdrop 支持 transition，但要注意：
- 只对
background-color和opacity做过渡最稳；backdrop-filter在 Safari 中动画易卡顿或跳帧 -
blur()值建议控制在4px～8px，blur(12px)在 iOS Safari 上已有明显滚动延迟 - 不要给
::backdrop加transform或animation，某些 Chrome 版本会跳过硬件加速导致闪烁
真正容易被忽略的是：模糊效果依赖「背后内容可被读取」，如果遮罩层父容器有 contain: strict 或 isolation: isolate，backdrop-filter 可能直接失效 —— 这类 CSS 很少被检查，却常出现在现代 UI 库的根容器上。
