Matarialize中文技术社区-Materialize专栏-Materialize CSS 框架中 Shadow（阴影）的使用详解与示例

Materialize CSS 框架中 Shadow（阴影）的使用详解与示例

Shadow

在网页设计中，阴影是提升界面层次感和视觉效果的重要工具之一。Materialize CSS 框架通过简化阴影的使用，帮助开发者快速为元素添加不同层次的阴影效果，增强设计的立体感和用户体验。

本文将详细介绍 Materialize CSS 框架中 Shadow 类的使用方法，并通过多个示例展示如何应用这些阴影效果。

1. 什么是 Shadow（阴影）？

阴影是一种视觉效果，用于增强元素的立体感，使它们看起来像是“浮”在页面上方。Materialize CSS 提供了多个内置的阴影类，分别代表不同深度和强度的阴影效果。通过这些类，开发者可以简单地为任意元素添加平滑且渐变的阴影。

2. Materialize CSS 中的 Shadow 类

Materialize CSS 提供了 5 个主要的阴影类，表示不同的阴影深度。阴影深度越大，阴影越明显，元素看起来“悬浮”得越高。

2.1 阴影类

类名	描述
`z-depth-0`	无阴影
`z-depth-1`	最小阴影深度
`z-depth-2`	中等阴影深度
`z-depth-3`	深度较高的阴影
`z-depth-4`	更高的阴影深度
`z-depth-5`	最大阴影深度，最明显

示例代码：

<div class="card z-depth-0">无阴影</div>
<div class="card z-depth-1">最小阴影</div>
<div class="card z-depth-2">中等阴影</div>
<div class="card z-depth-3">深度较高的阴影</div>
<div class="card z-depth-4">更高的阴影深度</div>
<div class="card z-depth-5">最大阴影深度</div>

在这个例子中，z-depth-0 到 z-depth-5 是控制阴影深度的类。数字越大，阴影越深，使元素看起来更加突出。

3. 如何使用 Shadow 类

3.1 应用在卡片组件上

Materialize 提供了卡片组件（Card），我们可以通过为卡片添加不同的 z-depth 类来改变卡片的阴影效果。

<div class="container">
  <!-- 最小阴影 -->
  <div class="card z-depth-1">
    <div class="card-content">
      <span class="card-title">卡片标题 - z-depth-1</span>
      <p>这是一个带有最小阴影的卡片。</p>
    </div>
  </div>

  <!-- 中等阴影 -->
  <div class="card z-depth-3">
    <div class="card-content">
      <span class="card-title">卡片标题 - z-depth-3</span>
      <p>这是一个带有中等阴影的卡片。</p>
    </div>
  </div>

  <!-- 最大阴影 -->
  <div class="card z-depth-5">
    <div class="card-content">
      <span class="card-title">卡片标题 - z-depth-5</span>
      <p>这是一个带有最大阴影的卡片。</p>
    </div>
  </div>
</div>

在这个示例中，卡片的阴影从 z-depth-1 到 z-depth-5 逐渐增加，页面中的元素看起来逐渐“悬浮”起来，视觉效果更为明显。

3.2 应用在按钮上

阴影效果也可以应用于按钮等其他元素，增强按钮的点击感。

<div class="container">
  <!-- 带有阴影的按钮 -->
  <a class="waves-effect waves-light btn z-depth-3">按钮 - z-depth-3</a>
  <a class="waves-effect waves-light btn z-depth-5">按钮 - z-depth-5</a>
</div>

这里，按钮应用了不同深度的阴影，给用户一种按钮“悬浮”在页面上的效果，尤其在 z-depth-5 时，按钮显得更加明显和突出。

4. Hover 状态下的阴影效果

有时你希望元素在默认状态下阴影较小，而在鼠标悬停时阴影变得更加明显。这可以通过 JavaScript 或 CSS 实现动态效果，也可以直接使用 Materialize 提供的 hoverable 类，它会在鼠标悬停时自动增加阴影效果。

示例：

<div class="container">
  <!-- 具有悬停效果的卡片 -->
  <div class="card hoverable z-depth-1">
    <div class="card-content">
      <span class="card-title">Hoverable 卡片</span>
      <p>鼠标悬停时，阴影会变得更加明显。</p>
    </div>
  </div>
</div>

在这个示例中，卡片默认具有较小的 z-depth-1 阴影深度。当用户将鼠标悬停在卡片上时，阴影会变得更加明显，突出卡片的交互性。

5. 自定义阴影效果

虽然 Materialize 提供了多种内置的阴影深度类，但你也可以根据项目需求自定义阴影效果。可以通过 CSS 覆盖默认的阴影设置，添加更加复杂的阴影效果。

示例：自定义阴影效果

.custom-shadow {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2), 0 16px 48px rgba(0, 0, 0, 0.15);
}

<div class="container">
  <!-- 自定义阴影 -->
  <div class="card custom-shadow">
    <div class="card-content">
      <span class="card-title">自定义阴影</span>
      <p>这个卡片使用了自定义的阴影效果。</p>
    </div>
  </div>
</div>

在这个示例中，custom-shadow 类通过 CSS box-shadow 属性实现了自定义的阴影效果。你可以根据项目的设计需求灵活调整阴影的大小、模糊度、透明度等参数，打造更加独特的视觉效果。

6. 使用 Shadow 的最佳实践

6.1 适度使用阴影

虽然阴影可以提升页面的视觉层次，但过度使用可能会导致页面看起来杂乱或不协调。建议在重要的交互元素（如按钮、卡片、弹窗等）上使用较深的阴影，而在辅助性元素上使用较浅的阴影，保持页面设计的简洁性。

6.2 在不同设备上的表现

在移动设备上，由于屏幕较小，阴影的效果可能会显得过于明显。对于移动端的设计，建议使用较浅的阴影（如 z-depth-1 或 z-depth-2），避免元素过度突出或看起来不协调。

7. 完整示例代码

以下是一个完整的示例页面，展示了 Materialize CSS 中 Shadow 类的不同使用方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Shadow 示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .custom-shadow {
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2), 0 16px 48px rgba(0, 0, 0, 0.15);
    }
  </style>
</head>
<body>

  <div class="container">
    <h4 class="center-align">Materialize Shadow 示例</h4>

    <!-- 无阴影 -->
    <div class="card z-depth-0">
      <div class="card-content">
        <span class="card-title">无阴影 - z-depth-0</span>
        <p>这个卡片没有任何阴影效果。</p>
      </div>
    </div>

    <!-- 最小阴影 -->
    <div class="card z-depth-1">
      <div class="card-content">
        <span class="card-title">最小阴影 - z-depth-1</span>
        <p>这是一个带有最小阴影的卡片。</p>
      </div>
    </div>

    <!-- 中等阴影 -->
    <div class="card z

-depth-3">
      <div class="card-content">
        <span class="card-title">中等阴影 - z-depth-3</span>
        <p>这个卡片具有中等的阴影效果。</p>
      </div>
    </div>

    <!-- 最大阴影 -->
    <div class="card z-depth-5">
      <div class="card-content">
        <span class="card-title">最大阴影 - z-depth-5</span>
        <p>这是一个带有最大阴影的卡片。</p>
      </div>
    </div>

    <!-- Hover 效果 -->
    <div class="card hoverable z-depth-1">
      <div class="card-content">
        <span class="card-title">Hoverable 阴影</span>
        <p>鼠标悬停时，阴影会变得更加明显。</p>
      </div>
    </div>

    <!-- 自定义阴影 -->
    <div class="card custom-shadow">
      <div class="card-content">
        <span class="card-title">自定义阴影</span>
        <p>这个卡片使用了自定义的阴影效果。</p>
      </div>
    </div>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

结论

通过 Materialize CSS 框架中的 Shadow 类，开发者可以轻松为网页元素添加不同深度的阴影效果，提升设计的视觉层次感。在适当场合下使用不同的阴影深度，不仅可以增强页面的美观性，还能提高用户的交互体验。配合 Materialize 提供的 hoverable 类和自定义的阴影设置，开发者可以灵活应用和控制元素的视觉层次。

评论区

评论列表

{{ rItem.user.nickname || rItem.user.username }} @ {{ rItem.toUser.nickname || rItem.toUser.username }}