dialog::backdrop 样式不生效，90% 是因为未调用 showmodal()；只有 showmodal() 才创建 backdrop 匿名盒，且必须用 dialog::backdrop 选择器，safari 17.6 及更早不支持，安全样式仅限 background-color、opacity 等，点击 backdrop 关闭需手动处理。
dialog::backdrop 样式不生效，90% 是因为没调用 showModal() —— 用 show()、open 属性或 HTML 写 open 都不会生成 backdrop 节点，CSS 再准也没用。
必须用 showModal() 才能触发 ::backdrop
浏览器只在 dialog.showModal() 调用后，才创建一个匿名的 backdrop 合成层。DevTools 里搜不到 ::backdrop？先检查 JS 是否真走了这行代码。
-
dialog.show()：仅设display: block，无 backdrop，无焦点锁定，点击外部不关闭 -
<dialog open></dialog>或dialog.open = true：等同于show()，不触发 backdrop - 只有
dialog.showModal()会插入 backdrop 匿名盒，且自动限制 tab 键焦点、响应 Esc 键
dialog::backdrop 选择器写法必须带 dialog 标签前缀
规范强制要求 ::backdrop 必须依附于 <dialog></dialog> 元素上下文，否则被浏览器直接忽略。
- ✅ 正确：
dialog::backdrop、dialog.modal::backdrop - ❌ 错误：
::backdrop（缺主体）、.modal::backdrop（类选择器无效）、dialog#myDialog::backdrop（ID 选择器部分浏览器解析不稳定） - Safari 17.6 及更早版本仍不支持
::backdrop，需用CSS.supports('selector(::backdrop)')检测并降级为<div class="overlay"> <h3>能安全设置的样式非常有限，别碰布局和层级属性</h3> <p><code>::backdrop是合成层伪元素，浏览器硬编码其渲染行为：铺满视口、固定层级（总在<dialog></dialog>下、页面内容上），多数 CSS 属性会被忽略或导致异常。- ✅ 安全可用：
background-color（必需，推荐#0008或rgba(0,0,0,0.5)）、opacity（慎用，可能与 background 叠加出意外灰度）、backdrop-filter（Chrome/Edge 120+ 支持，Safari/Firefox 仍不支持）、filter（如grayscale(20%)） - ❌ 禁止设置：
z-index（无效）、position/top/left（无视）、margin/padding/display（无意义甚至破坏渲染） - ⚠️ 注意：
backdrop-filter必须配合非透明background-color才稳定生效；纯rgba(0,0,0,0)会导致滤镜被跳过
点击 backdrop 关闭 dialog 得手动处理，不能依赖默认行为
::backdrop默认pointer-events: none，点击它不会冒泡、不会触发任何事件，更不会自动关闭 dialog。- 给
dialog::backdrop加pointer-events: auto（Safari 16.4+ 才支持） - 更兼容的做法：监听
dialog元素的click事件，判断event.target === dialogEl（即点在 backdrop 区域），再调dialogEl.close() - 移动端尤其注意：iOS Safari 对 touch 事件响应不稳定，可加
touch-action: auto缓解穿透 - 避免在 dialog 内部任意元素上调用
event.stopPropagation()，否则 click 根本冒泡不到 dialog 上
真正难的不是写对那几行 CSS，而是理解 ::backdrop 不是一个“可编程遮罩”，它是一套由浏览器严格控制的模态上下文副产物——所有样式、交互、兼容性问题，都源于这个前提。绕开它写个
<div class="overlay"> 反而更可控，尤其当你需要模糊、动画、精确尺寸或第三方库共存时。</div> - ✅ 安全可用：
