dialog默认无阴影，需用position:fixed+box-shadow+border-radius实现层级感；backdrop阴影须用radial-gradient模拟，且二者明暗需协调。
dialog元素默认没有阴影，必须手动加CSS
浏览器原生 <dialog></dialog> 标签本身不带任何样式，包括阴影、圆角、背景色——它只是个语义容器。所谓“层级感”，实际是靠 box-shadow + z-index + 背景/边框配合实现的视觉效果。
关键点在于：dialog 默认 display: none，且打开后（showModal() 或 show()）仍不会自动获得堆叠上下文，所以必须显式设置 position 和 z-index 才能让阴影生效并压住底层内容。
必须用 position: fixed 或 absolute 才能触发 box-shadow 渲染
很多开发者直接给 <dialog></dialog> 写 box-shadow 却没效果，根本原因是：dialog 默认是 display: block（打开后），但未脱离文档流，box-shadow 在非定位元素上虽可渲染，却常被父容器裁剪或与其他元素重叠混乱。
- 推荐用
position: fixed：确保居中、不随滚动偏移，且天然建立新层叠上下文 - 避免只写
position: relative：它不创建独立层叠上下文，阴影可能被同级兄弟元素遮盖 - 务必配
top: 50%; left: 50%; transform: translate(-50%, -50%)居中，否则fixed会贴左上角 - 记得设
z-index: 1000（或更高），否则可能被其他 fixed 元素（如导航栏）盖住
阴影参数要兼顾可读性与真实感
简单套用 box-shadow: 0 4px 12px rgba(0,0,0,0.15) 往往不够——dialog 是模态浮层，需要更强的“悬浮”暗示。同时要防止阴影过重导致文字发灰、边缘模糊。
- 推荐组合：
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)（双层阴影，外扩+内收，更立体） - 避免
blur值超过 30px：移动端易糊，且与现代 UI 的克制感冲突 - 用
rgba(0,0,0,0.12)而非0.2：高对比度屏幕下更柔和，也符合 Material Design / Apple HIG 的推荐值 - 别忘加
border-radius: 8px：圆角+阴影是层级感的关键搭档，缺一不可
backdrop 阴影不能靠 box-shadow 实现
<dialog></dialog> 的半透明遮罩层（::backdrop）是伪元素，不支持 box-shadow。想让它有“压暗+微弱边缘渐变”的纵深感，只能靠 background 渐变模拟：
dialog::backdrop {
background: radial-gradient(circle at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%);
}
这个渐变会让遮罩中心略深、边缘渐隐，比纯 rgba(0,0,0,0.2) 更有空间层次。注意：Chrome 113+、Firefox 99+ 支持 ::backdrop，Safari 15.4+ 仅支持 showModal() 下的 backdrop，旧版需降级处理。
真正容易被忽略的是：dialog 的阴影和 backdrop 的明暗必须协调——如果 dialog 本身阴影很轻，backdrop 却太暗，反而显得 dialog “陷”进去了；反之，backdrop 太浅，dialog 就像飘在空中没着落。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
