dialog::backdrop必须显式声明才生效，仅调用showModal()不自动启用样式；需单独定义background（如rgba）等属性，不可依赖继承或dialog本体样式，且opacity不能用于遮罩层以免影响内部内容。
dialog::backdrop 必须显式声明才生效
调用 showModal() 后，浏览器会生成一个匿名 backdrop 盒子，但它**不会自动继承任何样式**，也不会响应 dialog 元素本身的 background 或 opacity。如果你只写了 dialog { background: rgba(0,0,0,0.2); }，遮罩层颜色完全不变——因为那改的是 dialog 本体，不是遮罩。
必须单独写 dialog::backdrop 选择器，且至少设置 background（推荐 rgba()）或 background-color：
-
dialog::backdrop { background: rgba(0, 0, 0, 0.4); }—— 最稳妥的半透明灰 -
dialog::backdrop { background: linear-gradient(to bottom, #2c3e50, #1a252f); }—— 渐变色需带透明通道才安全，否则会盖死内容 - 别用
opacity: 0.3—— 它会把整个dialog（含内部文字、按钮）一起变淡
为什么写了 dialog::backdrop 还是没效果？
90% 的情况不是 CSS 写错，而是 JS 没触发模态栈。只有 showModal() 才创建 backdrop 节点；show()、open 属性、甚至 dialog.open = true 都不生成 ::backdrop。
检查以下几点：
立即学习“前端免费学习笔记（深入）”；
- 是否真的调用了
dialogEl.showModal()？DevTools 的 Elements 面板里搜::backdrop，找不到就说明没走对路 - 选择器是否完整？
::backdrop或.modal::backdrop无效，必须是dialog::backdrop - 是否在 Shadow DOM 内使用？目前各浏览器对
dialog::backdrop在 shadow tree 中的支持不一致，建议避免
想点击遮罩关闭 dialog，怎么写？
dialog::backdrop 默认 pointer-events: none，点击它什么都不会发生。要支持点击关闭，得手动接管事件逻辑：
- 给
dialog::backdrop加pointer-events: auto（Safari 16.4+、Chrome 105+ 支持，旧版 Safari 不行） - 监听
dialog元素的click事件，判断e.target === dialogEl（即点在 backdrop 区域而非内部按钮上） - 确保内部按钮等元素**没调用
e.stopPropagation()**，否则 click 无法冒泡到 dialog 层
示例片段：
dialogEl.addEventListener('click', (e) => {
if (e.target === dialogEl) {
dialogEl.close();
}
});
兼容性差的时候怎么办？
Firefox 97 前、Safari 15.4 前、以及所有 IE 都不支持 dialog::backdrop。更麻烦的是：dialog-polyfill 库**根本不模拟 ::backdrop**，它用额外 <div> 模拟遮罩，你写的 dialog::backdrop 样式会被完全忽略。
真正跨浏览器可控的方式只有两个：
- 运行时检测：
if ('showModal' in HTMLDialogElement.prototype)，支持则用原生 +dialog::backdrop，不支持则 fallback 到 div 模拟方案 - 在 fallback 方案中，自己控制那个遮罩
<div>的样式和显隐逻辑，不要指望一行 CSS 解决所有环境
别漏掉这点：遮罩层颜色是否可控，取决于你有没有真正接管它的渲染权——原生 ::backdrop 是“有条件可控”，polyfill 是“完全不可控”，中间没有灰色地带。
