dialog::backdrop必须显式声明CSS才生效，仅调用showModal()不自动启用样式；需单独定义background（如rgba）等属性，不可依赖继承或dialog本体样式，且opacity不能用于遮罩层以免影响内部内容。
dialog::backdrop必须显式声明才生效
不写dialog::backdrop选择器，只改dialog本身样式，遮罩层颜色完全不会变。浏览器默认渲染的遮罩层（通常是rgba(0,0,0,0.5)）是独立匿名盒，不继承、不响应dialog上的background或opacity——你得亲手给它写规则。
showModal()是前提，show()和open属性无效
调用dialog.show()、设置open属性、或直接在HTML里写<dialog open></dialog>，都不会触发::backdrop渲染。DevTools里根本看不到这个伪元素。只有dialogEl.showModal()执行后，它才真实存在。
- 常见错误：JS里写了
dialog.show()，以为能弹模态框，结果点击背景还能操作页面 - 另一个坑：DOM还没挂载就调
showModal()，报DOMException: The element does not have a namespace - 验证方式：打开弹窗后，在DevTools Elements面板搜索
::backdrop，没搜到说明没调对
能安全设置的CSS属性很有限
dialog::backdrop不是普通元素，它是合成层伪元素，很多布局属性会被忽略甚至引发异常。只推荐用这几个：
-
background：必须带透明通道，如rgba(0, 0, 0, 0.4)或linear-gradient(...) -
backdrop-filter：比如blur(2px)，但需配合background才可见，且Safari 15.4+/Chrome 110+才稳定支持 -
mix-blend-mode：适合主题切换，比如multiply让遮罩和背景色叠加出深色效果 - 别碰
z-index、position、margin——它们要么被无视，要么破坏层级 - 绝对不要用
opacity：它会把整个dialog（包括内部文字按钮）一起变透明
想点遮罩关闭弹窗？得自己加逻辑
原生::backdrop默认pointer-events: none，点它什么也不会发生。要实现“点背景关闭”，有两个路子：
立即学习“前端免费学习笔记（深入）”；
- 方案一（现代浏览器）：加
dialog::backdrop { pointer-events: auto; }，再监听dialog的click事件，检查e.target === dialogEl - 方案二（兼容兜底）：不依赖
::backdrop，而是手动插入一个<div class="overlay">并控制其显隐——尤其当用<code>dialog-polyfill时，它根本不渲染::backdrop，你写的CSS全白写 - 注意：如果
dialog内部按钮或内容用了e.stopPropagation()，点击遮罩会失效，因为事件根本冒泡不到dialog上
真正麻烦的不是怎么写那行background，而是得时刻判断当前环境是否真有::backdrop——检测'showModal' in HTMLDialogElement.prototype只是第一步，polyfill、旧版Firefox、甚至某些iOS Safari变体，都会绕过你的CSS。这时候遮罩层颜色可控性，就从CSS问题变成了渲染接管问题。
