css - 如何为垫卡创建边框，如自定义组件中垫子表单字段的轮廓

Question

我有这个特定的设计要求，我使用 MatCardComponent 并且在每张卡里面都有桌子。现在我想像在 MatFormField 中一样添加浮动在边框间隙中的标签。

如上图，但不是输入，而是 MatCard 并在其表内。

有什么办法可以达到这个结果？请帮我。谢谢

标签： cssangularcustomizationmat-form-fieldmat-card

Answer 1

我找到了解决方法及其工作：

<div class="outline">
<mat-card>
 <mat-card-header>
     <mat-card-title class="title-overlap">test</mat-card-title>
 </mat-card-header>
</mat-card>
</div>

.outline{
    border-radius: 6px;
    border-style: solid;
    border-width: 1px;
}
.title-overlap{
  position: absolute;
  top: -17px;
  left: 20px;
  background-color: white;
  padding-left: 1rem;
  padding-right: 1rem;
}