层级
Elevation
别名:层级投影层级阴影层级海拔z-depthelevationshadow level
这是什么
用阴影的深浅表达元素离纸面的远近：0 贴平、1～2 浮起、3 以上成浮层。一套阴影由本影、半影、环境三层叠加而成，档位越高投影越大越淡。层级只用来表达叠放关系，不要拿它当装饰。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 卡片、菜单、弹层需要可感知的叠放次序
- 可点击块要暗示“浮在页面之上”
- 模态与吸顶栏需要比内容更高的投影档位
✕ 不适用场景
- 扁平风格或新粗野主义，投影与语言冲突
- 全屏堆满高档位投影，层级通胀后无人可信
- 用投影代替分隔线或留白来划分区域
常见形式
双层材质投影
Material 2-layer
本影 + 半影双阴影，档位 0～5 清晰
扁平描边
Flat border-only
无投影，靠 1px 边框与底色差
柔和环境投影
Soft ambient
大而淡的单层投影，气质轻盈
实现要点
box-shadowenv(safe-area-inset-*)z-index把档位做成令牌：--elev-0: none; --elev-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.12); 每升一档投影更扩散、更淡。深色模式阴影几乎不可见，改用更亮的描边或提高表面亮度。浮层记得配 z-index 阶梯；贴边浮层用 env(safe-area-inset-*) 避开手势区。
平台 API
box-shadowenv(safe-area-inset-*)z-index代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| CSS | box-shadow |
| Material Design | Elevation |
| Tailwind CSS | shadow-sm / shadow-md / shadow-xl |
相关概念
按用途而非色相命名的颜色变量：bg、surface、text、muted、accent、danger。组件只认角色，主题切换时在映射层换指向即可，不必改组件。浅色、深色、高对比、品牌皮肤都是同一套角色的不同取值表。
基础搭配使用
用半透明磨砂玻璃质感表示悬浮层级的视觉语言：backdrop-filter 背景模糊 + 低透明度 填充 + 一圈细窄的白色高光描边，让面板像磨砂玻璃片一样透出底下的色彩与图形。 它强调"层"——玻璃之下必须有可透出的丰富背景，否则质感无从谈起。
风格搭配使用鼠标悬停时卡片或按钮轻轻上浮（translateY -2～6px）并加深投影， 像被无形的手托起。最常见的"这个可以点"的桌面端暗示， 成本极低但立刻让页面有层次和呼吸感。
动效搭配使用