dialog::backdrop 样式生效的前提是调用 dialog.showModal()，否则伪元素不生成；仅支持 background-color（需含 alpha）和 backdrop-filter（兼容性有限），禁用 z-index、opacity 等；需手动处理关闭逻辑、focus 管理及 Firefox/Safari 降级方案。
根本不用写复杂逻辑——只要没调用 dialog.showModal()，所有 dialog::backdrop 样式都白写。
为什么写了 dialog::backdrop 却完全没反应
不是 CSS 写错了，是伪元素压根没生成。常见原因包括：
-
dialog.show()、dialog.open = true或 HTML 里直接写<dialog open>都不会触发::backdrop - DevTools Elements 面板搜不到
::backdrop？说明它根本没创建，别调样式了
dialog::backdrop 能用哪些样式，哪些绝对别碰
它不是真实 DOM 元素，而是浏览器合成层绘制的视觉层，支持范围极窄：
- ✅ 安全可用：
background-color（必须带 alpha，如#0006或rgba(0,0,0,0.05)；opacity不起作用） - ✅ 有条件可用：
backdrop-filter（Chrome/Edge 稳定；Safari 16.4+ 实验性；Firefox 至今不渲染） - ❌ 完全无效：
z-index、width、height、transform、pointer-events、opacity - ⚠️ 视觉风险：
background-image、linear-gradient()—— Safari 和部分安卓 WebView 会静默降级为纯黑或空白
如何安全实现淡入动画和兼容降级
直接对 [open] 属性加 transition 在 Firefox 中无效，得换思路：
立即学习“前端免费学习笔记（深入）”；
- 用 class 控制：JS 调用
dialog.showModal()前先加dialog.classList.add('is-open')，再设dialog.is-open::backdrop { transition: background-color 0.3s ease; } - 点击 backdrop 关闭需手动监听：
dialog.addEventListener('click', e => e.target === dialog && dialog.close())，不能依赖默认行为 - Firefox 不支持
::backdrop，必须降级：@supports not selector(::backdrop) { /* 插入同级 <div class="backdrop-fallback"> */ } - Safari 对 touch 事件响应不稳定，可加
dialog::backdrop { -webkit-tap-highlight-color: transparent; }
移动端和 Safari 特别容易踩的坑
iOS/Safari 是当前最棘手的环境：
- 点击 backdrop 区域可能穿透到底层元素，或关闭后残留灰层——本质是 focus 管理异常，必须手动
dialog.focus()+dialog.close()组合修复 - 若同时用
backdrop-filter和background-color，Safari 15.4–16.3 有 z-index 异常，需显式加z-index: 2147483647 - blur 值超过
8px易卡顿，iOS 旧设备上甚至闪退；模糊值建议严格控制在blur(4px)～blur(6px) - 不要指望
@media (prefers-color-scheme: dark)直接切换::backdrop颜色，CSS 变量必须定义在:root，否则 JS 动态切主题时失效
真正麻烦的从来不是怎么写样式，而是确认 showModal() 是否真被执行、
