使用 ::backdrop 伪元素可为 模态框添加半透明或模糊背景，提升视觉层次与用户体验，支持现代浏览器，可通过 css 自定义样式、动画及 backdrop-filter 实现淡入淡出与毛玻璃效果。
在弹窗模态中使用 ::backdrop 伪元素，可以为模态框背后的内容添加视觉遮罩效果，比如半透明背景或模糊处理。这个特性特别适用于 <dialog></dialog> 元素，能提升用户体验和界面美观度。
理解 ::backdrop 伪元素
::backdrop 是一个与全屏或模态元素相关的伪元素，它出现在元素“背后”的整个视口区域。当使用 showModal() 方法打开一个 <dialog></dialog> 模态框时，浏览器会自动为其生成一个 ::backdrop，开发者可以通过 CSS 自定义其样式。
注意：该特性主要配合 <dialog></dialog> 使用，且现代浏览器支持较好（Chrome、Edge、Firefox 117+）。
基础用法：添加半透明遮罩
最常见的应用是给模态框添加灰色半透明背景，防止用户操作背后的页面内容。
立即学习“前端免费学习笔记（深入）”；
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.4);
}这样，当 dialog 弹出时，整个页面会被一层深色半透明层覆盖，突出显示模态框本身。
进阶效果：模糊背景
如果想实现更现代的毛玻璃效果，可以结合 backdrop-filter 实现模糊。
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(4px);
}这会让模态框背后的内容产生模糊效果，增强层次感。适合用于设计感较强的界面。
自定义动画与交互
你还可以为 ::backdrop 添加过渡动画，使遮罩出现更自然。
dialog::backdrop {
background-color: rgba(0, 0, 0, 0);
transition: background-color 0.3s ease;
}
dialog[open]::backdrop {
background-color: rgba(0, 0, 0, 0.4);
}这样遮罩会在模态打开时淡入，关闭时淡出，视觉更流畅。
基本上就这些。合理使用 ::backdrop 能让模态框体验更专业，关键是确保遮罩不影响可访问性，比如颜色对比度足够，关闭方式明确。不复杂但容易忽略细节。
