如何在CSS中使用Materialize制作卡片阴影

Materialize是一款基于Material Design设计语言的CSS框架，它内置的卡片组件几乎开箱即用，其中最吸引人的就是那层柔和的立体阴影。不过不少人在实际项目中会发现，默认阴影有时太浅或太深，与自己的页面风格不搭，这时候就需要理解它背后的box-shadow实现，才能精准地自定义。本文将从默认样式、覆盖方法和进阶技巧三个方面，详细讲解Materialize卡片阴影的控制方式。

一、Materialize卡片阴影的默认实现原理

Materialize的卡片组件依赖一组预定义的类名来工作，最核心的是.card类。查看Materialize的源码你会发现，这个类本身只负责圆角、背景色和布局，真正产生阴影效果的是框架内置的.z-depth-1样式，而.card类在编译时会被自动附加一层z-depth级别的阴影。换句话说，卡片的立体感来自CSS的box-shadow属性，而不是任何图片或边框模拟。

box-shadow属性的语法是box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 颜色。Materialize在阴影颜色上使用了带透明度的黑色，例如rgba(0,0,0,0.2)，这样阴影能自然地叠加在不同背景色上。Material Design规范定义了从0到5共六个阴影层级，层级越高阴影越大越扩散，模拟出元素离页面越远的效果。卡片默认使用的是第1到第2层级之间，视觉上非常克制。

二、基本用法：用card类快速生成带阴影的卡片

最简单的用法是直接引入Materialize的CSS文件，然后按照固定的HTML结构编写卡片。一个标准的卡片由.card容器和内部的内容区域组成，结构如下：

<div class="card">
  <div class="card-content">
    <span class="card-title">卡片标题</span>
    <p>这里是卡片的正文内容，Materialize会自动为整个卡片应用柔和的阴影效果。</p>
  </div>
  <div class="card-action">
    <a href="#">这是一个链接</a>
  </div>
</div>

这段代码不需要写任何自定义CSS，渲染出来的卡片就自带圆角和阴影。如果你希望手动指定阴影层级，可以额外添加z-depth系列类，例如给卡片加上z-depth-3，阴影会明显加深。下面列出常用的几个层级对应的效果，方便选择：

.z-depth-0 {
  box-shadow: none !important;
}
.z-depth-1 {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
              0 3px 1px -2px rgba(0,0,0,0.12),
              0 1px 5px 0 rgba(0,0,0,0.2);
}
.z-depth-2 {
  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),
              0 1px 10px 0 rgba(0,0,0,0.12),
              0 2px 4px -1px rgba(0,0,0,0.2);
}

值得注意的是，Materialize的多层阴影写法是Material Design推荐的技巧。它叠加了两到三层不同模糊半径和偏移的阴影，让过渡更自然，比单层大模糊阴影的质感好得多。自定义时建议也采用这种多层写法，而不是简单的一条阴影。

三、自定义覆盖默认阴影的方法与优先级陷阱

当默认效果不满足需求时，需要用自定义CSS去覆盖。这里有一个常见的坑：Materialize源码中的z-depth类使用了!important声明，这意味着你写的普通覆盖规则可能完全无效。解决办法有两种，一是选择器优先级更高，二是同样加上!important。推荐的做法是在自定义样式表中明确写出更高优先级的选择器，例如同时带上容器类名：

.card.custom-shadow {
  box-shadow: 0 8px 16px rgba(0,0,0,0.25) !important;
  transition: box-shadow 0.3s ease;
}

/* 鼠标悬浮时加深阴影，营造可点击的悬浮感 */
.card.custom-shadow:hover {
  box-shadow: 0 12px 24px rgba(0,0,0,0.35) !important;
}

上面的代码还加了一个过渡效果，让阴影变化时有平滑的动画，这在交互体验上非常重要。没有过渡时阴影会瞬间跳变，显得生硬；加上transition后，鼠标移入移出会有一种卡片被“抬起来”的感觉，这正是Material Design强调的动效理念。

另一个需要注意的点是加载顺序。如果你的自定义样式表在Materialize之前引入，即使优先级相同也会被覆盖。所以要确保自定义CSS文件放在Materialize之后引入，例如：

<link rel="stylesheet" href="materialize.min.css">
<link rel="stylesheet" href="custom.css">

最后补充一个实用技巧：如果需要根据页面亮暗主题切换阴影，可以用CSS变量来管理阴影颜色。把阴影颜色定义为变量，切换主题时只改变量值，所有卡片阴影会同步更新，维护起来比逐条修改规则轻松得多。总结来说，理解了Materialize阴影的本质就是box-shadow的多层叠加，再掌握好优先级和加载顺序这两点，你就能随心所欲地控制卡片的立体效果了。

Materialize卡片阴影box-shadow修改时间：2026-09-03 23:38:55