::backdrop仅对调用showModal()的原生<dialog>元素生效，不支持div等自定义组件；其样式仅限background、opacity、filter等，不可设宽高定位；需用:root变量配合媒体查询实现主题切换；自定义模态框应使用显式遮罩div替代。
为什么::backdrop在dialog元素外基本无效
::backdrop不是通用遮罩伪元素，它只对原生<dialog>元素生效，且仅在showModal()调用后渲染。用在div、modal类自定义组件上完全不会触发——浏览器根本不会生成该伪元素。很多开发者误以为它是类似::before的通用装饰工具，结果调试半天发现样式没应用，根源就在这里。
常见错误现象：div.modal::backdrop { background: rgba(0,0,0,0.5); } 完全无效果；控制台也查不到对应的伪元素节点。
- 仅支持
<dialog>（需已调用showModal()） - 不支持
show()（非模态模式下::backdrop不渲染） - Firefox 98+、Chrome 97+、Edge 97+ 支持；Safari 15.4+ 仅部分支持（需
dialog在顶层浏览上下文中）
::backdrop的样式限制与可操作范围
它本质是渲染在<dialog>背后、覆盖整个视口的一层“背景幕”，但层级固定（z-index 为 -1），不能被其他元素覆盖，也不能通过z-index提升。它的盒模型就是整个 viewport，不继承父容器尺寸或定位上下文。
能安全设置的属性有限：background（含渐变、透明度）、opacity、filter（如blur(2px)）、animation（需配合@keyframes）。但以下写法无效：
立即学习“前端免费学习笔记（深入）”；
-
width/height：会被忽略（它始终铺满） -
position、top等定位属性：无意义 -
transform：部分浏览器不支持，行为不一致 -
border、padding、margin：不可见也不起作用
示例（有效）：
dialog::backdrop {
background: radial-gradient(circle at center, rgba(0,0,0,0.6), transparent 70%);
animation: fade-in 0.3s ease-out;
}
如何让::backdrop响应深色模式或主题切换
它支持媒体查询和 CSS 自定义属性，但必须确保变量已在根作用域定义，且在dialog显示前已就绪。直接在dialog内设--backdrop-bg无效，因为::backdrop不属于dialog的子树，而是独立渲染层。
- 推荐做法：在
:root中定义主题变量，再在::backdrop中引用 - 深色模式检测用
@media (prefers-color-scheme: dark)包裹整个规则块 - 避免在 JS 中动态改
style属性——它不作用于伪元素
示例：
:root {
--backdrop-bg: rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
:root {
--backdrop-bg: rgba(30, 30, 40, 0.7);
}
}
dialog::backdrop {
background: var(--backdrop-bg);
}
替代方案：当必须用自定义弹窗时怎么模拟::backdrop效果
如果你用的是div + aria-modal这类手写模态框，::backdrop天然不可用。此时必须显式添加一个兄弟级遮罩div，并手动管理它的显示/隐藏和层级关系。
- 遮罩
div需紧跟在<body>末尾，避免被其他position: fixed元素遮挡 - 设置
inert属性在遮罩激活时禁用背景交互（比pointer-events: none更语义化） - 用
transition: opacity 0.2s实现淡入，避免硬切 - 务必监听
Escape键和点击遮罩关闭逻辑，<dialog>的内置行为不会自动迁移
关键点：不要试图 hack ::backdrop去适配非dialog结构——它不是设计来这么用的。老实用一个<div class="modal-backdrop">更可控、更兼容、更容易测试。
