必须显式设置dialog::backdrop的background属性（如rgba或渐变），否则遮罩层无颜色；它不继承dialog样式，且需独立定义，点击关闭需监听dialog click并判断e.target === dialog。
直接写 dialog::backdrop 样式，但必须显式声明 background（用 rgba() 或渐变），否则遮罩层颜色不会变——浏览器不自动启用伪元素样式，也不继承 dialog 本身的背景。
dialog::backdrop 必须单独定义，不能靠 dialog 本体样式
很多人以为给 dialog 元素设了 background: rgba(0,0,0,0.3) 就能影响遮罩层，其实完全无效。遮罩层是伪元素，和 dialog 是两个独立渲染层，dialog::backdrop 不继承任何父级样式，也不响应 dialog 的 background、opacity 或 filter。
-
dialog { background: rgba(0,0,0,0.2); }→ 只改弹窗本体背景，遮罩仍是默认黑灰 -
dialog::backdrop { opacity: 0.4; }→ 错误！会把整个dialog（含内部文字按钮）一起变透明 - 漏写
dialog::backdrop选择器，只写dialog→ 遮罩层颜色毫无变化
正确设置遮罩色的写法：background + 透明通道
核心是用 background 属性配合带 alpha 通道的颜色值，确保遮罩层有“透”但不“糊”。
- 基础半透明黑：
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 的坑：不能监听 dialog 元素的 click
dialog::backdrop 是伪元素，无法直接绑定事件。想点遮罩关弹窗，得监听 dialog 的 click 并手动判断坐标或目标是否为遮罩区域。
- 错误写法：
dialog.addEventListener('click', () => dialog.close())→ 点弹窗内任意按钮也会触发关闭 - 安全做法：监听
dialog的click，用e.target === dialog判断是否点在遮罩上（现代浏览器支持） - Safari 旧版 fallback：用
e.clientX和dialog.getBoundingClientRect()做坐标比对，因为e.target在 Safari 中常不指向dialog
兼容性兜底：不支持 showModal 时 dialog::backdrop 样式会被忽略
检测必须用 'showModal' in HTMLDialogElement.prototype，而不是检查元素是否存在。polyfill（如 dialog-polyfill）不会模拟 dialog::backdrop，它用额外 div 实现遮罩——你写的伪元素样式完全不生效。
- 原生支持的浏览器：Chrome 94+、Firefox 97+、Safari 15.4+
- 降级方案必须另起一套 DOM 结构（比如插入
<div class="backdrop"></div>）并手动控制其background - 别指望一行 CSS 覆盖所有环境；遮罩色可控，但控制权不在你手上时，就得自己接管渲染逻辑
真正麻烦的不是写错颜色值，而是 Safari 对 dialog::backdrop 的事件冒泡处理不一致、坐标判断偏差、以及 polyfill 完全无视你的伪元素样式——这些细节上线后才暴露，且只在特定设备上复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
