角料卡头如何填写

Question

我有类似下一个模板的棱角材质经典卡片

<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Shiba Inu</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <p>The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.</p>
  </mat-card-content>
</mat-card>

并尝试填充银色标题，例如

Answer 1

您可以使用mat-card-header和mat-card-content，

<mat-card class="example-card">
   <mat-card-header>
        <mat-card-title>Shiba Inu</mat-card-title>
   </mat-card-header>
   <mat-card-content>
    <p>The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.</p>
   </mat-card-content>
</mat-card>

并设置这些 css

mat-card-header{
  background: #12121212;
  padding: 5px;
  color:white;
}

mat-card-content{
  padding: 10px;
}

mat-card{
  padding:0;
}

示例应用程序