dialog 元素的 ::backdrop 伪元素仅在调用 showmodal() 打开时生效；show() 或直接设置 open 属性不会创建 backdrop，因此样式无效。
dialog 元素的 ::backdrop 伪元素默认不生效？检查是否用了 showModal()
只有通过 showModal() 方法打开的 <dialog></dialog> 才会渲染 ::backdrop；用 show() 或直接设 open 属性不会触发。浏览器（Chrome/Firefox/Edge）对 ::backdrop 的支持前提是模态上下文，否则该伪元素压根不被创建，样式自然无效。
-
<dialog id="myDialog">...</dialog>必须调用document.getElementById('myDialog').showModal() - 若用
dialog.show()，::backdrop选择器匹配失败，DevTools 中也看不到该伪元素 - Safari 目前（截至 v17.6）仍不支持
::backdrop，需用 JS 模拟遮罩层作为降级方案
::backdrop 样式写法必须带 dialog 标签限定，不能单独使用
直接写 ::backdrop { background: rgba(0,0,0,0.5); } 是无效的——CSS 规范要求 ::backdrop 必须依附于 <dialog></dialog> 元素，否则会被忽略。正确写法是显式加上标签选择器或类名前缀。
- ✅ 正确：
dialog::backdrop { background: rgba(0,0,0,0.4); } - ✅ 正确：
dialog.modal::backdrop { background: #0008; }（#0008是rgba(0,0,0,0.5)的简写） - ❌ 错误：
::backdrop { ... }或.modal::backdrop { ... }（缺少dialog元素上下文） - 注意：不能用 ID 选择器限定（如
dialog#myDialog::backdrop），部分浏览器解析不稳定，建议用 class
半透明遮罩层级和点击穿透问题怎么处理？
::backdrop 默认 z-index 很低（通常为 -1），且不响应 pointer-events。如果遮罩“看不见”或点透到背后内容，大概率是层级或事件配置没到位。
- 给
dialog::backdrop显式设置z-index: 9999;（需高于页面其他元素） - 加
pointer-events: auto;才能让遮罩拦截点击（默认是none） - 避免在
<dialog></dialog>外层套 div 并设position: relative，这可能干扰 backdrop 渲染位置 - 若遮罩颜色异常（如发灰），检查是否有父容器设置了
filter或transform，它们会创建新的 stacking context，影响 backdrop 定位
兼容性差时如何安全降级？别依赖纯 CSS 方案
Firefox 支持 ::backdrop 但不支持 transition 动画；Safari 完全不支持；旧版 Chrome 需启用实验性 flag。真要稳定控制遮罩，得准备 JS fallback。
- 检测支持：
if (CSS.supports('selector(::backdrop)')) { /* 用原生 */ } else { /* 插入 div.overlay */ } - 插入遮罩层时，用
dialog.getBoundingClientRect()获取位置，避免滚动偏移 - 监听
dialog的close事件，及时移除自定义遮罩，防止内存泄漏 - 不要用
opacity做渐变显示——::backdrop不支持 transition，动画只能靠 JS 控制 overlay 元素
真正麻烦的不是写样式，而是判断什么时候该信浏览器、什么时候该自己造轮子。尤其当产品要跑在企业内网老旧 Chromium 内核上时，::backdrop 很可能只是个幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
