dialog::backdrop 必须显式声明 background 才生效，且仅 showModal() 触发；Firefox 不渲染 backdrop，Safari 旧版支持不全，需降级处理模态逻辑而非仅视觉。
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.5); }—— 最稳妥的半透明灰，各浏览器渲染一致 - 避免
linear-gradient除非带透明通道（如rgba(44, 62, 80, 0.6)），否则纯色渐变会盖死内容 - 绝对不要用
opacity：它会把整个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 内使用：目前 Chrome/Firefox/Safari 对
dialog::backdrop在 shadow tree 中的支持不一致，容易失效
Chrome/Safari/Firefox 的遮罩兼容性差异
原生 backdrop 渲染能力差异大，不能只靠 CSS 声明：
- Chrome/Edge 111+ 和 Safari 17.4+ 支持
dialog::backdrop，但 Safari 16.4–17.3 仅部分支持，且不响应pointer-events: auto - Firefox 目前（截至 2026 年 9 月）**完全不渲染 backdrop**，只提供模态逻辑（禁用背景、锁焦点、Esc 关闭），视觉上无遮罩层
- 运行时检测比
@supports (display: dialog)更可靠：typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype - 若需统一视觉，降级方案不能只加个
div.backdrop—— 还得手动管理焦点锁定、Tab 循环、Esc 拦截，复杂度接近手写弹窗
点击遮罩关闭的跨浏览器写法
原生 backdrop 点击默认不关闭，且各浏览器对事件冒泡行为处理不同。Safari 中 e.target === dialogEl 判断不可靠（backdrop 不是真实节点），Chrome/Edge 可用但不保险。
- 推荐坐标判断：监听
dialog的click，用getBoundingClientRect()检查clientX/Y是否落在 dialog 区域外 - 内部按钮等元素必须避免
e.stopPropagation()，否则 click 无法冒泡到dialog层 - 别给
dialog::backdrop绑事件 —— 它是伪元素，无法 attach listener，也不能读取状态 - 如果用了
show()，压根没有 backdrop，此逻辑直接失效
真正麻烦的不是写几行 CSS，而是 backdrop 在 Firefox 里根本不存在，在 Safari 旧版本里行为飘忽，而点击关闭的判定逻辑又依赖底层渲染实现。想“统一”，就得接受一部分浏览器永远做不到像素级一致 —— 重点是保证模态逻辑（焦点、Esc、关闭响应）不出错，视觉差异反而次要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
