dialog::backdrop样式不生效的根本原因是未调用showmodal()；只有showmodal()才生成该伪元素，且仅支持background、backdrop-filter等有限样式，点击遮罩关闭需监听dialog自身click事件并判断target。
dialog::backdrop 样式不生效？八成是没调用 showModal()，不是 CSS 写错了。
为什么 dialog::backdrop 一点反应都没有
浏览器只在 dialog.showModal() 被执行后、dialog.close() 之前，才生成并渲染 ::backdrop 这个匿名伪元素。其他任何方式都不会触发它：
-
dialog.show()—— 只显示 dialog，无遮罩、不锁焦点、ESC 不响应 -
<dialog open></dialog>或dialog.open = true—— 等价于show()，同样没 backdrop - DOM 尚未就绪就调用
showModal()—— 报错或静默失败，DevTools 里根本查不到::backdrop
打开 DevTools 的 Elements 面板，搜索 ::backdrop，搜不到？先打断点确认 JS 真的走到了 dialog.showModal() 那一行。
dialog::backdrop 能设什么样式、不能碰什么
它是个浏览器硬合成的全屏层，不参与常规盒模型，也不受父级样式影响。能安全用的只有这几个：
-
background（推荐rgba(0, 0, 0, 0.5)或#0006）—— 最稳，必设 -
backdrop-filter: blur(4px)—— 必须和非透明background同时存在才生效，否则 Safari/Chrome 可能完全不渲染 -
filter: grayscale(10%)或mix-blend-mode: multiply—— 可用，但性能略高 -
opacity—— 慎用，会叠加在background上导致灰度偏差，且部分旧版 Safari 渲染异常
以下一律忽略，写了也无效：
-
z-index、position、top/left -
width/height、margin/padding、transform -
border、display、pointer-events（除auto外）
怎么让点击遮罩关闭 dialog
浏览器默认不支持点击 ::backdrop 关闭 —— 它天生 pointer-events: none，而且你没法给伪元素直接绑事件。必须手动处理：
- 监听
dialog元素自身的click事件 - 检查
e.target === dialog，说明点在 backdrop 区域（不是内部按钮或表单） - 调用
dialog.close()即可 - 确保 dialog 内部元素没调用
e.stopPropagation()，否则 click 冒泡不到 dialog
移动端要额外加 touch-action: auto 到 dialog::backdrop，缓解 iOS Safari 的点击穿透问题。
兼容性与降级要点
Firefox 至今不支持 ::backdrop；Safari 15.4+ 支持但 backdrop-filter 渲染极不稳定；Chrome/Edge 97+ 较可靠。别只靠 @supports selector(::backdrop)：
- 用
@supports (backdrop-filter: blur(1px))单独检测滤镜能力 - 写
-webkit-backdrop-filter前缀，且放在标准属性前面 - blur 值建议 ≤12px，避免中低端设备滚动卡顿或文字发虚
- 旧版 Safari（≤15.6）需 fallback：比如用
div.overlay+ JS 手动控制显隐
最常被忽略的一点：dialog::backdrop 是伪元素，不是真实节点 —— 你不能用 querySelector 获取它，也不能读它的 offsetWidth 或绑定事件，所有交互逻辑都得绕到 dialog 元素本身上做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
