materialize 卡片无阴影通常因 css 未加载或 html 结构错误:需确认引入了正确版本的 materialize css 文件,检查卡片元素是否使用小写 class="card" 并符合标准结构,排除 css 冲突或重置影响。

Materialize 的卡片(card)默认带有阴影效果,如果不显示,通常不是组件本身问题,而是样式未正确加载或结构缺失。
确认 Materialize CSS 已正确引入
阴影由 box-shadow 定义在 .card 类中,若 CSS 未加载,自然无阴影。检查 HTML 中是否已引入官方 CSS 文件:
- 使用 CDN(推荐快速验证):
css/materialize.min.css"> - 确保该标签位于
内,且没有被其他 CSS 覆盖或屏蔽 - 打开浏览器开发者工具(F12),在 Elements 面板中选中卡片元素,查看
.card是否有box-shadow声明;若无,说明 CSS 未生效
检查 HTML 结构是否符合规范
Materialize 卡片需包裹在正确容器中,且必须包含 card 类:
- 基础结构示例:
- 缺少
card类,或写成class="Card"(大小写敏感)、class="card-wrapper"等非标准类名,都会导致样式不匹配 - 避免将
card类误加在子元素(如card-content)上
排查 CSS 冲突或重置影响
某些全局样式(如 CSS Reset、Normalize 或自定义重置)可能清除了 box-shadow:
- 在开发者工具中检查卡片元素的 computed 样式,看
box-shadow是否被标记为strikethrough(被覆盖) - 临时禁用其他 CSS 文件,仅保留 Materialize,确认阴影是否恢复
- 若存在冲突,可手动强化阴影(不推荐长期使用):
.card { box-shadow: 0 2px 5px rgba(0,0,0,0.16) !important; }
注意版本差异与文档对应
Materialize v1.x 和旧版(0.98)的卡片类名和默认样式略有不同:
- v1.x 使用
card,阴影默认启用;v0.98 同样支持,但部分主题包可能精简了样式 - 确认你参考的是对应版本的文档:https://www.php.cn/link/5246c96db29909e5fc9432e1db33c2b5
- 避免混用不同版本的 HTML 结构和 CSS 文件










