Materialize框架通过z-depth-X类控制卡片阴影，X为0到5的数字，数值越大阴影越强。例如z-depth-3用于明显阴影效果，可结合JavaScript实现悬停增强阴影交互，合理选用层级避免过度浮起感。
在使用 Materialize 框架时，卡片（Card）的阴影效果是通过预定义的类自动控制的，其底层依赖于 box-shadow 的 CSS 样式。Materialize 提供了一套简洁的方式，无需手动写 CSS 即可实现不同层级的阴影效果。
Materialize 中的卡片阴影类
Materialize 使用 z-depth 类来控制元素的阴影深度，适用于卡片、面板等组件。这些类命名格式为 z-depth-X，其中 X 是 0 到 5 的数字，代表阴影的强度。
- z-depth-0：无阴影（完全扁平）
- z-depth-1：轻微阴影（默认卡片效果）
- z-depth-2：中等阴影
- z-depth-3：较明显阴影
- z-depth-4：强阴影，有明显浮起感
- z-depth-5：最强阴影，常用于突出重要元素
例如，创建一个带有中等阴影的卡片：
<div class="card z-depth-3"><div class="card-content">
<span class="card-title">标题</span>
<p>这是卡片内容。</p>
</div>
</div>
自定义 box-shadow 覆盖默认样式
如果需要更精细地控制阴影，可以在自定义 CSS 中覆盖 Materialize 的默认值。比如修改 z-depth-2 的阴影颜色或模糊程度：
立即学习“前端免费学习笔记（深入）”；
.z-depth-2 {
box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
}
注意：使用 !important 是因为 Materialize 的样式优先级较高，若需确保生效建议将自定义样式放在引入 Materialize 后。
响应式与动态控制阴影
可以通过 JavaScript 动态添加或移除 z-depth 类，实现交互反馈。例如鼠标悬停时增强阴影：
document.querySelector('.card').addEventListener('mouseenter', function() {this.classList.add('z-depth-5');
});
document.querySelector('.card').addEventListener('mouseleave', function() {
this.classList.remove('z-depth-5');
});
基本上就这些。利用 z-depth 类可以快速实现 Material Design 风格的阴影层次，既简单又高效。不复杂但容易忽略的是合理选择层级，避免过度使用高 z 值导致界面“太飘”。
