如何在CSS中使用Materialize制作卡片阴影_Materialize card类控制box-shadow

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：最强阴影，常用于突出重要元素

例如，创建一个带有中等阴影的卡片：

自定义 box-shadow 覆盖默认样式

如果需要更精细地控制阴影，可以在自定义 CSS 中覆盖 Materialize 的默认值。比如修改 z-depth-2 的阴影颜色或模糊程度：

立即学习“前端免费学习笔记（深入）”；

Veed AI Voice Generator

Veed推出的AI语音生成器

77

查看详情

注意：使用 !important 是因为 Materialize 的样式优先级较高，若需确保生效建议将自定义样式放在引入 Materialize 后。

响应式与动态控制阴影

可以通过 JavaScript 动态添加或移除 z-depth 类，实现交互反馈。例如鼠标悬停时增强阴影：

基本上就这些。利用 z-depth 类可以快速实现 Material Design 风格的阴影层次，既简单又高效。不复杂但容易忽略的是合理选择层级，避免过度使用高 z 值导致界面“太飘”。

以上就是如何在CSS中使用Materialize制作卡片阴影_Materialize card类控制box-shadow的详细内容，更多请关注php中文网其它相关文章！