Angular Material 陰影使用

依托于 Angular Material 庫，可以直接使用通用的符合 Material Design 風格的陰影。

使用

使用方式有兩種：

• 外聯樣式設定，即在css或scss中設定
• 通過class名稱設定，即 元素的class名稱

方式一：外聯樣式使用

1. 在scss或css文件中導入

@import '~@angular/material/theming';

2. 在class名稱或者id內設定

.my-custom-button  { @include mat-elevation(2);
}

其中mat-elevation(2)這個函數需要傳遞一個數值類型的參數，這個參數值越大陰影越大。

編譯后的陰影樣式為：

.my-custom-button {box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}