dialog::backdrop生效的前提是dialog必须通过showmodal()打开；直接设open属性或调用show()不会渲染该伪元素，样式无效。
::backdrop 能生效，前提是 dialog 必须通过 showModal() 打开；直接设 open 属性或调用 show() 不会渲染该伪元素，样式写得再全也没用。
为什么 dialog::backdrop 样式完全不生效？
最常见原因是没走模态路径。浏览器只在 showModal() 调用后才创建 backdrop 匿名盒，其他方式压根不生成这个节点。
-
dialog.show()→ 无 backdrop，::backdrop选择器匹配失败，DevTools 里都看不到它 -
dialog.open = true或 HTML 写<dialog open></dialog>→ 同样不触发 backdrop - 用了
dialog:open::backdrop这类写法 → 语法错误，::backdrop本身只存在于模态态，:open是冗余且无效的 - CSS 里只写
::backdrop { ... }（没带dialog前缀）→ 浏览器忽略，必须显式限定为dialog::backdrop或.modal-dialog::backdrop
怎么安全设置半透明+模糊效果？
::backdrop 支持 background-color 和 backdrop-filter，但组合使用有细节陷阱：Safari 要求两者共存才渲染模糊，而部分安卓 WebView 会丢弃 background-image 导致滤镜失效。
- ✅ 推荐写法：
dialog::backdrop { background-color: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } - ❌ 避免用
background: linear-gradient(...)或url()→ 某些浏览器会跳过backdrop-filter - ⚠️
opacity不推荐替代rgba()→ 它会让整个 backdrop 层变透明，包括其上叠加的滤镜效果，视觉失真 - ? 检查父容器是否设了
transform、filter或contain: layout→ 这些会截断 backdrop 渲染区域，导致遮罩只盖住局部
点击 backdrop 关闭 dialog 怎么实现？
标准行为中，点击 ::backdrop 默认不关闭 dialog；需手动监听并判断点击目标。注意别被 pointer-events 或事件冒泡干扰。
-
dialog::backdrop默认pointer-events: none，必须显式设为auto才能捕获点击 - 监听
dialog元素的click事件，检查event.target === dialog（即点在 backdrop 区域） - 避免在 dialog 内部元素上调用
event.stopPropagation()，否则 click 无法冒泡上来 - 不要对
dialog::backdrop直接绑定事件 —— 它是伪元素，无法添加事件监听器
兼容性差时怎么降级？
Safari 15.4+ 才支持 ::backdrop，Firefox 不支持 backdrop-filter 在 backdrop 上，旧版 Chrome 需开启 flag。不能只靠 CSS。
- 用
CSS.supports('selector(::backdrop)')检测原生支持，而非只看浏览器 UA - 降级方案中，遮罩层必须插入到
document.body顶层，不能套在任意父容器里，否则 z-index 和定位会错乱 - 若页面有滚动，需同步监听
dialog的showModal和close事件，动态控制 body 的overflow: hidden - Web Components 封装时，
<dialog></dialog>必须挂载到body下，不能放在 shadow DOM 或深层嵌套结构中，否则 backdrop 不渲染
真正容易被忽略的是：backdrop 的渲染边界由 <dialog></dialog> 所在的层叠上下文决定，不是由视口决定。哪怕写了 100vw/100vh，只要它被某个 transform 父容器包裹，遮罩就可能缩成一小块——调试时优先检查 DOM 结构层级，而不是反复改 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
