图层
图层
图层本身承载了内容和组件,它是一种用来为内容建立组织关系和联系的视觉元素。我们通过区分图层位于 Z 轴的深度来赋予它们层级关系。
图层 | 高度 | 投影 | 适用范围 |
---|---|---|---|
信息层 | 4 | 0 2px 4px 0 rgba(0,0,0,0.10); | 信息卡片 |
覆盖层 | 8 | 0 4px 8px 0 rgba(0,0,0,0.10); | 顶部栏、下拉选项 |
导航层 | 12 | 0 6px 12px 0 rgba(0,0,0,0.10); | 侧边导航 |
模态层 | 20 | 0 10px 20px 0 rgba(0,0,0,0.10); | 模态弹窗、消息通知 |