如何填写角材卡头

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;
}

示例应用