::backdrop默认不生效是因为dialog必须调用showmodal()才触发渲染；show()或display: block无效，且需确保dom已挂载、无css重置干扰。
dialog元素的::backdrop为什么默认不生效
因为<dialog></dialog>必须显式调用showModal()才能触发::backdrop渲染；用show()或CSS display: block模拟弹窗，::backdrop完全不会出现。这是最常被忽略的前提——不是写了伪元素就自动起作用。
常见错误现象：::backdrop样式写好了，但背景没变色、没遮罩、甚至开发者工具里都看不到该伪元素节点。
- 确认调用的是
myDialog.showModal()，不是myDialog.show() - 检查
<dialog></dialog>是否已插入DOM（未挂载时调用showModal()会静默失败） - 确保没有其他CSS重置了
backdrop-filter或background（比如全局* { all: unset }）
给::backdrop加背景色和模糊效果的实际写法
::backdrop本质是一个覆盖在页面内容之上的半透明层，它支持大部分background相关属性，但不支持transform或animation（部分浏览器下动画帧会丢失）。
典型可用组合：
-
background: rgba(0, 0, 0, 0.6)—— 纯色遮罩 -
backdrop-filter: blur(4px)—— 毛玻璃效果（注意Safari需-webkit-backdrop-filter） -
transition: background 0.2s ease—— 只对background等少数属性有效
示例：
dialog::backdrop {
background: rgba(0, 0, 0, 0.55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
IE/Edge旧版和Firefox对::backdrop的支持差异
Firefox直到111版本才支持::backdrop，且早期版本（≤109）存在z-index异常问题；IE全系不支持<dialog></dialog>和伪元素。这不是“兼容性补丁能解决”的问题，而是底层渲染机制缺失。
如果项目需支持Firefox ::backdrop，改用手动插入遮罩层（如<div class="dialog-backdrop">）并控制显示逻辑。<ul>
<li>检测支持：用<code>'backdrop' in CSS.supports或Element.prototype.showModal存在性判断
@supports (backdrop-filter: blur(1px))来判断::backdrop可用性——两者能力不同::backdrop里写pointer-events: none，它本就不响应事件，加了反而可能干扰焦点管理遮罩层级被其他元素穿透的排查重点
::backdrop默认z-index为-1，但它是在<dialog></dialog>自身stacking context内绘制的，不是全局最高层。如果页面有position: fixed且z-index很大的导航栏、悬浮按钮，它们会盖在遮罩上。
关键点：
-
::backdrop的堆叠上下文由<dialog></dialog>创建，它的层级只高于<dialog></dialog>的兄弟元素，不高于父容器设了z-index的祖先 - 不要给
<dialog></dialog>设z-index: 9999就以为万事大吉——得看它的父级有没有更小的z-index形成封闭上下文 - 调试技巧：临时给
dialog::backdrop加border: 2px solid red，确认它是否真的渲染出来了
真正可控的方式是统一用dialog作为body直系子元素，并确保它在DOM顺序中靠后，避免被祖先stacking context截断。
