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