dialog::backdrop必须显式声明才能自定义遮罩层样式；仅设置dialog样式无效，因其与遮罩层无继承关系；正确写法是用background配合rgba值或渐变，并可叠加backdrop-filter实现毛玻璃效果。
dialog::backdrop 必须显式声明才生效，不写它，showModal() 调用后遮罩层颜色就固定为浏览器默认（通常是 rgba(0, 0, 0, 0.5)），改不了。
dialog::backdrop 必须单独写，不能靠继承或 dialog 本体样式
很多人以为给 dialog 元素加 background 就能影响遮罩，其实完全无效。遮罩层是浏览器在 dialog 外部渲染的独立层，和 dialog 元素本身无样式继承关系。
-
dialog { background: rgba(255, 255, 255, 0.9); }→ 只改对话框内容背景，不影响遮罩 -
dialog::backdrop { background: #000; }→ 没透明度，页面内容被完全盖住，失去“遮罩”意义 -
dialog::backdrop { opacity: 0.4; }→ 错误！opacity会把整个dialog（含内部文字、按钮）一起变透明 - 漏写
dialog::backdrop选择器，只写了dialog样式 → 遮罩层颜色不会变
正确设置 backdrop 颜色和效果的写法
核心是用 background 属性配合带 alpha 通道的值，再按需叠加 backdrop-filter。
- 基础半透明灰：
dialog::backdrop { background: rgba(0, 0, 0, 0.4); } - 深蓝渐变：
dialog::backdrop { background: linear-gradient(135deg, #1e3c72, rgba(30, 60, 114, 0.6)); } - 毛玻璃效果：
dialog::backdrop { background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(2px); }（Chrome 110+ / Safari 9+ / Firefox 103+ 支持） - 想让遮罩点击关闭？得自己监听：
dialog.addEventListener('click', e => e.target === dialog && dialog.close());
兼容性差时，dialog::backdrop 样式根本不起作用
旧版 Firefox（dialog-polyfill 环境）或 Safari dialog::backdrop，你写的 CSS 完全被忽略——polyfill 是用额外 <div> 模拟遮罩的，不是伪元素。
立即学习“前端免费学习笔记（深入）”；
- 检测是否可用：
if ('showModal' in HTMLDialogElement.prototype) - 不支持时，别只依赖 CSS；得手动插入遮罩 DOM 并控制其 class 或 style
- 不要指望一行
dialog::backdrop解决所有浏览器的遮罩定制需求
真正跨浏览器统一遮罩样式，关键不在怎么写 CSS，而在判断「这个 backdrop 是浏览器画的，还是你代码画的」——后者你才有完全控制权。
