dialog::backdrop 不生效是因为未调用 showModal()；仅此方法触发 backdrop 渲染层，其他方式均无效，且样式支持极窄，仅 background-color（需透明度）和 backdrop-filter（部分浏览器支持）可用。
写了 dialog::backdrop 却没反应？不是 CSS 写错了，是伪元素根本没生成——showModal() 没调用，所有样式都白写。
为什么 dialog::backdrop 完全不生效
浏览器只在调用 dialog.showModal() 时才创建 backdrop 渲染层；dialog.show()、dialog.open = true、甚至 HTML 里写 <dialog open></dialog> 都不会触发它。
- DevTools Elements 面板搜不到
::backdrop？说明它压根没生成，别调样式了 - 选择器必须严格写成
dialog::backdrop——.modal::backdrop或div::backdrop无效
dialog::backdrop 支持哪些样式，哪些绝对别碰
它不是真实 DOM 元素，而是浏览器合成层绘制的视觉层，支持范围极窄：
- ✅ 安全可用：
background-color（必须带 alpha，如#0006或rgba(0,0,0,0.05)） - ✅ 有条件可用：
backdrop-filter（Chrome/Edge 稳定；Safari 16.4+ 实验性；Firefox 至今不渲染） - ❌ 完全无效：
z-index、width、height、transform、opacity、pointer-events - ⚠️ 视觉风险：
background-image、linear-gradient()—— Safari 和部分安卓 WebView 会静默降级为纯黑或空白
如何实现淡入动画并兼容 Firefox/Safari
直接对 [open] 属性加 transition 在 Firefox 中无效，得换思路：
立即学习“前端免费学习笔记（深入）”；
- JS 调用
dialog.showModal()前先加类：dialog.classList.add('is-open') - CSS 写成
dialog.is-open::backdrop { transition: background-color 0.3s ease; } - Firefox 不支持
::backdrop，必须降级：@supports not selector(::backdrop) { /* 插入同级 <div class="backdrop-fallback"> */ }<li>Safari 对 touch 事件响应不稳定，可加 <code>dialog::backdrop { -webkit-tap-highlight-color: transparent; } - 监听
dialog的 click 事件，检查e.target === dialog再调用dialog.close() - 避免内部元素调用
event.stopPropagation()，否则 click 冒泡不到 backdrop 层 - 不要设
dialog::backdrop { pointer-events: none; }，这会让点击完全失效 - 若项目需支持 Firefox，核心遮罩逻辑（焦点锁定、Tab 循环、Esc 拦截）必须由 JS 控制 fallback 元素
点击 backdrop 关闭 dialog 的跨浏览器写法
原生 backdrop 点击默认不关闭，且各浏览器对事件冒泡处理不一致：
最易被忽略的一点：你写的每一条 dialog::backdrop 样式，都建立在 showModal() 成功执行的前提下——没调用它，就等于没打开那扇门，后面所有装修都毫无意义。
