Css 如何在同一html中以角度材质分离组件？

我在

Angular material

中有一个项目，其中有一个component.html，我在其中定义了一个表单和一个包含数据的表

在我的项目（第一个图像）中，我有选项卡的标题、一个用于添加新记录的表单以及记录显示的表。我想要实现的与第二幅图中的相同，即组件是重叠的

这是我当前的窗口：

这就是我想要实现的目标：

这是my component.html：

<div class="title">Customer registration</div>
<mat-divider></mat-divider>

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>New</mat-expansion-panel-header>
    <form [formGroup]="formNew">
      <mat-grid-list cols="4" rowHeight="50px" gutterSize="10px">
        <mat-grid-tile>
          <mat-form-field fxFlex>
            <input matInput placeholder="ID" formControlName="id">
          </mat-form-field>
        </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field fxFlex>
              <input matInput placeholder="First Name" formControlName="first_name">
              <mat-icon matSuffix>person_outline</mat-icon>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field fxFlex>
              <input matInput placeholder="Last Name" formControlName="last_name">
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field fxFlex>
              <input matInput placeholder="Phone" formControlName="phone">
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <div>
              <button mat-stroked-button (click)="save()">Add</button>
            </div>
          </mat-grid-tile>
      </mat-grid-list>
    </form>
  </mat-expansion-panel>
</mat-accordion>

<mat-card class="mat-elevation-z8">
  <mat-table [dataSource]="customers">

    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
      <mat-cell *matCellDef="let customers"> {{customers.id}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="nombre">
      <mat-header-cell *matHeaderCellDef>First Name</mat-header-cell>
      <mat-cell *matCellDef="let customers"> {{customers.first}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="apellido">
      <mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
      <mat-cell *matCellDef="let customers"> {{customers.last}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="telf">
      <mat-header-cell *matHeaderCellDef>Phone</mat-header-cell>
      <mat-cell *matCellDef="let customers"> {{customers.phone}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="act">
      <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
      <mat-cell *matCellDef="let row">
        <button mat-button><mat-icon>edit</mat-icon></button>
        <button mat-button><mat-icon>delete_forever</mat-icon></button>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

  </mat-table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</mat-card>

客户注册
新的
人物提纲
添加
身份证件
{{customers.id}
名字
{{customers.first}
姓
{{customers.last}
电话
{customers.phone}
行动
编辑
永远删除你

---

我的问题：如何分离组件，以便在照片中看到不同的级别？

可以使用纯CSS创建一个

框阴影

效果。因此，所有内容都应放在该div中：

*{
保证金：0；
填充：0；
框大小：边框框；
}
富安先生{
利润率：15px；
}
.影子{
宽度：100%；
身高：100%；
背景颜色：浅绿色；
盒影：0px 0px 3px浅灰色；
}

文件

所有HTML元素都应该放在这里

看起来图像是different@StepUp如果第二张图片来自另一个网站，这就是我想要达到的结果哦，你想要一条带阴影的边界线吗？@Steppup是的，我试过使用一张垫子卡，在另一张垫子卡内使用表单，但我没有得到相同的结果。我想用阴影获取边距，就好像它们在cardsOk中一样。是的，这对我来说很有效，我如何才能将“添加”按钮放在垫子网格的右侧？是否会有一个mat grid tile属性占用mat grid列表的第4列？@synffryd请参阅我的更新答案，使用colspan=“3”这样它就占用了3列，我需要的是它占用了1列，而不是第4列4@synffryd请看我的最新答案