dialog::backdrop样式不生效的根本原因是未调用showModal()，只有showModal()才会生成该伪元素；CSS必须写为dialog::backdrop且仅用background设置颜色，不可用opacity，需搭配backdrop-filter使用background才能生效，点击遮罩关闭需监听dialog自身click事件并判断target。
dialog::backdrop 样式不生效？先确认是否真调用了 showModal() —— 其他任何方式（show()、open 属性、display: block）都不会生成这个伪元素，CSS 写得再准也白搭。
为什么 dialog::backdrop 样式完全没反应
根本原因不是选择器写错，而是浏览器压根没创建那个匿名 backdrop 层。它只在 dialog.showModal() 执行后、dialog.close() 之前这一小段时间内存在。DevTools 里搜不到节点？先打断点确认 JS 确实走到了那一行。
-
show()只让显示出来，不锁焦点、不加遮罩、点击外部不关闭 -
或dialog.open = true等价于show()，同样不会触发 backdrop - 必须用
showModal()，这是唯一入口；调用后浏览器自动插入 backdrop 合成层，并锁定 tab 键焦点、响应 Esc 键 - 选择器必须带
dialog标签前缀：dialog::backdrop✅，.modal::backdrop❌，::backdrop❌
能设哪些样式？哪些绝对别碰
::backdrop 是浏览器硬编码的合成层，铺满视口、固定层级（总在 下、页面内容上），不参与常规盒模型和层叠上下文。
- ✅ 安全可用：
background-color（最稳，推荐rgba(0,0,0,0.5)）、opacity（慎用，叠加background可能出灰度偏差）、backdrop-filter（需搭配非透明background-color才生效）、filter（如grayscale(10%)） - ❌ 一律忽略：
width/height、top/left、margin/padding、transform、display、z-index（设了也无效） - ⚠️ 高风险：
background-image或复杂linear-gradient—— Safari 16.4 前会直接回退为透明，遮罩“消失”；mix-blend-mode在部分 Chromium 版本中渲染不稳定
如何写出兼容 Chrome / Edge / Safari 的毛玻璃效果
Safari 15.4+ 支持 ::backdrop，但对 backdrop-filter 渲染极不稳定；Chrome/Edge 97+ 稳定；Firefox 仍不支持该伪元素。不能只靠 @supports 检测，fallback 必须真实可用。
- 用
@supports selector(::backdrop)检测基础支持，再用@supports (backdrop-filter: blur(1px))分层判断滤镜能力 - 必须写
-webkit-backdrop-filter前缀，且放在标准属性前面，Safari（含 iOS 微信 X5 内核）不认无前缀版本 - blur 值建议控制在
8px～12px；超过16px在中低端设备滚动时易卡顿，文字边缘发虚 - fallback 方案别用伪元素叠加
filter: blur()，逻辑冲突可能导致双模糊或卡死；稳妥做法是降级为background-color: rgba(255,255,255,0.3)+ 圆角 + 边框
点击 backdrop 关闭 dialog 得手动处理
::backdrop 默认 pointer-events: none，点击它不会冒泡、不会触发事件，更不会自动关闭 。
- 给
dialog::backdrop加pointer-events: auto—— Safari 16.4+ 才支持，旧版 Safari 和 Firefox 不认 - 更兼容的做法：监听
dialog的click事件，用event.target === dialog判断是否点在 backdrop 区域，再调用dialog.close() - 注意父容器若设了
overflow: hidden、transform、clip-path或will-change，会截断 backdrop 渲染区域，导致点击失效
真正容易被忽略的是 backdrop 的“生命周期”和“渲染隔离性”：它不是常驻 DOM 节点，也不是普通 CSS 作用域；一旦父容器脱离根层叠上下文（比如包在 position: absolute 容器里），或者祖先链有 isolation: isolate，backdrop 就可能只盖住局部甚至完全不可见——这时候查 CSS 没用，得先看结构和层叠上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
