::backdrop仅在dialog调用showModal()时生效，show()或open属性无效；必须用dialog::backdrop选择器，仅支持background-color等有限样式，不支持z-index和pointer-events，Safari/Firefox兼容性差需降级。
::backdrop 不是通用遮罩工具，它只在特定条件下生效——写样式前先确认你用的是 <dialog> 且调用了 showModal()，否则所有 CSS 都不会起作用。
dialog::backdrop 必须配合 showModal() 才能触发
很多开发者写了 dialog::backdrop { background: rgba(0,0,0,0.5); } 却没效果，根本原因是：dialog.show()、dialog.open = true 或纯 HTML <dialog open> 都不会创建 ::backdrop 节点。DevTools 的 Elements 面板里搜不到 ::backdrop，就说明它压根没生成。
- 必须显式调用
dialog.showModal()（不是show()） -
<dialog>元素不能被transform、filter、will-change或overflow: hidden的祖先容器包裹，否则 backdrop 渲染会被裁剪或消失 - 确保
<dialog>直接挂载在<body>下，避免嵌套在第三方 UI 库的容器里（比如 Ant Design 的div.ant-modal-root）
background-color 是唯一可靠的颜色控制方式
::backdrop 的背景渲染极不稳定：渐变、图片、background-image 在 Safari 和部分安卓 WebView 中会被忽略，甚至导致 backdrop-filter 失效。最稳妥的做法是只用 background-color，并带明确 alpha 值。
- ✅ 推荐写法：
dialog::backdrop { background-color: #0008; }（等价于rgba(0,0,0,0.05)） - ❌ 避免写法：
dialog::backdrop { background: linear-gradient(...); }或background: url(...); } - ⚠️ 注意：
opacity不能替代透明色——设opacity: 0.5但background-color: #000，在 Safari 中可能仍显示纯黑；必须把透明度写进颜色值里
Safari 和 Firefox 的兼容性必须主动降级
截至 2026 年 6 月，Firefox 仍未支持 ::backdrop 的任何样式（包括 background-color），Safari 对 backdrop-filter 的支持也仅限于特定 UA 上下文。不能依赖 @supports 检测 backdrop-filter 就认为 ::backdrop 可用。
立即学习“前端免费学习笔记（深入）”；
- 安全检测应为：
@supports selector(::backdrop) and (background-color: #0008) - 降级方案不是“不加样式”，而是插入一个同级
<div class="backdrop-fallback">，用position: fixed; inset: 0; z-index: 9998;手动模拟 - 若项目需支持 Firefox，
::backdrop只能当视觉增强项，核心遮罩逻辑必须由 JS 控制 fallback 元素的显隐
z-index 和 pointer-events 无效，交互拦截得另做
::backdrop 的层叠层级由浏览器硬编码：总在 <dialog> 下方、页面内容上方，z-index 完全无效。它默认 pointer-events: none，也无法设回 auto —— 这意味着你无法靠它阻止点击穿透。
- 要防点击，必须额外加一层
<div class="overlay">，并设pointer-events: auto -
dialog自身需设z-index: 9999，fallback overlay 设z-index: 9998，确保层级关系明确 - 别把
::backdrop当成传统遮罩层用——它只是视觉修饰，不是功能组件
真正容易被忽略的点是：即使所有条件都满足，::backdrop 的渲染边界仍受祖先 transform 或 clip-path 影响。如果遮罩只盖住一半屏幕，不要调样式，先查 DOM 结构里有没有“看不见”的父容器在偷偷截断渲染范围。
