用途:shadow-elevation 提供一套 UI 阴影与层级(elevation)设计规范,用于定义界面元素的深度与分层,让卡片、下拉、弹窗等处于一致的视觉层级。
主要能力:给出 0 到 4 级的 elevation 变量定义,从平面到最高浮动面板逐级加深:--elevation-0 为 none;--elevation-1 为 0 1px 3px rgba(0,0,0,0.08),用于卡片、按钮的轻微抬升;--elevation-2 为 0 4px 8px rgba(0,0,0,0.12),用于下拉、浮层;--elevation-3 为 0 8px 24px rgba(0,0,0,0.16),用于模态、对话框;--elevation-4 为 0 16px 48px rgba(0,0,0,0.20),用于最高层浮动面板。
规则:层级越高越靠近用户,模态高于下拉、下拉高于卡片;阴影方向向下,光源始终来自上方;阴影越大越柔和,扩散随层级增加;深色模式下降低阴影不透明度,或改用表面颜色提亮;同一层级在产品内保持相同阴影值。
反模式:给不需要抬升的元素加阴影(平面即可);出现多个光源导致阴影方向不一致;阴影过深显得像 2012 年的拟物化应用;用阴影代替边框做分隔(应二选一)。
使用方式与限制:资料未提供具体安装命令、代码调用方式或平台支持信息,暂未提供。以上为设计规范层面的变量与规则,实际落地需结合项目自身样式系统。