投影与覆盖物表现层级

1.暗主题用用三层阴影与覆盖物的透明度去表现出组件的层级高度

虚拟高度（dp） 第一层（14） 第二层（12） 第三层阴影（20） 覆盖物（#fff）
0 无 无 无 0
1 1，1 2，1，-1 1，3 5
2 2，2 3，1，-2 1，5 7
3 3，4 3，3，-2 1，8 8
4 4，5 1，10 2，4，-1 9
6 6，10 1，18 3，5，-1 11
8 8，10，1 3，14，2 5，5，-3 12
12 12，17，2 5，22，4 7，8，-4 14
16 16，24，2 6，30，5 8，10，-5 15
24 24，38，3 9，46，8 11，15，-7 16

2.不同高度对应的组件

虚拟高度（dp） 组件
0 文本按钮、标准侧边面板
1 开关、卡片（默认高度）、搜索条（默认高度）
2 包裹按钮（默认高度）
3 刷新指示器、搜索条（滚动时）
4 顶部应用栏（滚动时）
6 悬浮操作按钮、提示条
8 包裹按钮（按下时）、卡片（拖拽起时）、菜单与子菜单、底部应用栏、底部导航栏、标准底部面板、标准侧边面板
12 悬浮操作按钮（按下时）
16 模态底部面板、模态侧边面板
24 弹窗

3.前端实现：用两层嵌套的div模拟设计稿中的container和overlay层

  1. <div class="container">
  2.   <div class="overlay">
  3.     <span class="content">这是一行标题</span>
  4.   </div>
  5. </div>

具体的定位由container负责，宽高由内层的overlay确定,且三层阴影由overlay实现。

  1. .container{
  2.     position:absolute;
  3.   left:30px;
  4.   top:20px;
  5.   border-radius:5px;
  6.   background:#121212;
  7. }
  8. .overlay{
  9.     height:88px;
  10.   width:220px;
  11.   border-radius:5px;
  12.   border:1 solid rgba(255,255,255,0.12);
  13.   background:rgba(255,255,255,0.04);
  14.   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 2px -1px rgba(0,0,0,0.20);
  15. }