dialog.showmodal()调用后::backdrop才被创建，仅在此期间存在；或show()均不触发，且必须用dialog::backdrop选择器，支持background-color等有限样式，禁用z-index等布局属性。
dialog.showModal() 触发后，::backdrop 才真正存在
根本别指望 dialog::backdrop 在 <dialog open></dialog> 或 dialog.show() 时生效——浏览器压根不生成这个伪元素。它只在 dialog.showModal() 调用后那一瞬间被创建，且自动插入到层叠上下文最底层（dialog 下方、页面内容上方）。DevTools 里搜不到？先确认 JS 真执行了 dialog.showModal()，而不是只设了 open = true。
常见误判点：
- 用
<div class="modal"> 模拟对话框 → <code>::backdrop完全无效，它只认原生<dialog></dialog> - 父容器加了
overflow: hidden、transform或clip-path→ backdrop 渲染区域被截断，可能只盖住局部甚至消失 - dialog 套在
position: absolute或脱离根层叠上下文的容器里 → backdrop 不铺满视口，只覆盖该容器范围 -
background-color: rgba(0, 0, 0, 0.5)—— 最稳，所有支持浏览器都认 -
backdrop-filter: blur(4px)—— 配合非透明background-color才生效，Safari/Firefox 仍不支持 -
opacity—— 慎用，部分浏览器会和background-color叠加出意外灰度 -
mix-blend-mode—— 适合深/浅主题动态叠加，但需测试兼容性 -
z-index、position、top/left、width/height—— 浏览器直接忽略 -
margin/padding、display、transform—— 不仅无效，还可能破坏渲染 -
background-image或复杂linear-gradient—— Safari 16.4 前直接回退为透明，遮罩“消失” - 给
dialog::backdrop加pointer-events: auto（注意：Safari 16.4+ 才支持） - 监听 dialog 元素的
click事件，检查event.target === dialog（即点在 backdrop 区域） - 确保 dialog 内部元素没调用
event.stopPropagation()，否则 click 冒泡不到 dialog 上 - 别试图给
::backdrop直接绑定事件 —— 它是伪元素，无法添加监听器 - 用
@supports selector(::backdrop)检测是否可用（注意不是@supports (backdrop-filter: blur(1px))） - 不支持时，用
<div class="overlay"> 手动模拟遮罩，并同步控制显隐和焦点锁定 <li>避免把 <code>backdrop-filter当核心功能，它只是锦上添花；半透明背景（background-color）才是底线
能设什么样式？哪些属性写了也白写
::backdrop 是合成层伪元素，浏览器硬编码其行为：固定铺满视口、不可重定位、不响应常规盒模型。你只能安全操控视觉通道，不能动布局和层级。
✅ 推荐用的：
❌ 绝对别碰：
点击 ::backdrop 关闭 dialog？得自己写逻辑
默认情况下 ::backdrop 的 pointer-events 是 none，点击它不会冒泡、不会触发事件，更不会自动关闭 dialog。想实现点击遮罩关闭，必须手动处理：
移动端尤其要小心：iOS Safari 和部分安卓 WebView 中，::backdrop 对 touch 事件响应不稳定，可加 touch-action: auto 缓解穿透问题。
兼容性差时怎么降级？别硬扛
Safari 17.6 及更早版本完全不支持 ::backdrop，Firefox 也仍处于实验阶段。别靠用户升级浏览器来解决问题：
真正容易被忽略的是：backdrop 的渲染依赖于浏览器的“顶层呈现上下文”，一旦 dialog 被包裹进 transform 或 will-change 容器，或父级设置了 overflow: hidden，它就可能被裁剪、偏移甚至彻底不出现——这种问题在封装 modal 组件时高频发生，且 DevTools 很难直观定位。
