<mat-card>未呈现凸起效果（无边框），是否缺失额外CSS？

嘿，我来帮你搞定这个问题！你的<mat-card>没显示出预期的凸起效果和边框，最常见的原因是Angular Material的主题样式没有正确配置或导入——毕竟Material组件的默认视觉样式完全依赖于主题系统。下面是一步步的排查和解决方法：

1. 确认全局样式中导入了Angular Material主题 #

Angular Material组件的默认样式（包括mat-card的阴影、边框）都定义在预构建主题里，你需要在全局样式文件（比如styles.css或styles.scss）中导入一个预构建主题：

// 选择一个预构建主题，比如indigo-pink，也可以用其他的比如deeppurple-amber.css
@import '@angular/material/prebuilt-themes/indigo-pink.css';

如果是自定义主题，要确保你已经正确定义了主题并导入到全局样式中。

2. 检查模块导入是否完整 #

确保你在对应的Angular模块（比如AppModule或者你的功能模块）中导入了MatCardModule，同时不要忘记导入BrowserAnimationsModule——部分Material组件的视觉效果依赖动画模块：

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule } from '@angular/material/card';

@NgModule({
  imports: [
    // ...其他必要模块
    BrowserAnimationsModule,
    MatCardModule
  ]
})
export class AppModule { }

3. 排查是否有自定义样式覆盖了默认效果 #

有时候你自己写的全局样式或者组件样式会意外覆盖Material的默认样式。比如如果有类似* { box-shadow: none; }这样的全局重置，就会把mat-card的凸起阴影去掉。

你可以打开浏览器开发者工具（按F12），选中mat-card元素，查看Styles面板，检查box-shadow和border属性是不是被划掉（表示被覆盖）了。如果是，调整你的自定义样式优先级或者修改对应的规则。

4. 手动添加自定义样式（兜底方案） #

如果上面的方法都没解决，你可以直接给mat-card添加自定义样式来模拟凸起效果：

mat-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

把这段样式加到组件的CSS文件或者全局样式里即可。

内容的提问来源于stack exchange，提问作者user5047085