在角垫板上使用阴影

时间:2019-05-24 07:23:13

标签: html css angular frontend shadow

我正在开发一个前端有角度的项目,并且试图为我的组件之一添加阴影,并且已经读到class="mat-elevation-z8"应该可以解决问题。但是,它什么也没做。

我的html:

<mat-card class="mat-elevation-z8" style="height: 400px; width: 400px;">
    <mat-card-header>
      <mat-card-title *ngIf="message">{{(message.title | truncateword: 25) | slice:0:30}}</mat-card-title>
      <mat-card-subtitle *ngIf="message">{{message.publishedAt | date}}</mat-card-subtitle>
    </mat-card-header>

  <img *ngIf="image" [src]="image" alt="Here might be a preview image" mat-card-image>

    <mat-card-content>
      <p *ngIf="message">
        {{(message.summary | truncateword:70 | slice:0:73)}}
      </p>
    </mat-card-content>
</mat-card>

此外,我正在我的styles.css中导入~@angular/material/theming,所以也不应该成为问题。这是我的angular.json中的样式:

 "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

您应该尝试:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';