在 Material Design 中，所有内容都应具有特定 z 深度，它决定元素在页面上的凸起程度或接近程度。

您可以通过向 HTML 标记添加 class="z-depth-2" 来轻松应用此阴影效果。或者，您可以使用 @extend .z-depth-2 通过 Sass 扩展任何这些阴影。 z-depth-0 可用于移除默认具有 z 深度的元素的阴影。

    <div class="col s12 m2">
      <p class="z-depth-1">z-depth-1</p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-2">z-depth-2</p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-3">z-depth-3</p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-4">z-depth-4</p>
    </div>
    <div class="col s12 m2">
      <p class="z-depth-5">z-depth-5</p>
    </div>