📌  相关文章
📜  角材料-WhiteFrame

📅  最后修改于: 2020-10-28 05:02:47             🧑  作者: Mango

Angular Material有几种特殊的类别，可以将容器显示为带有阴影的纸质卡片。

下表列出了不同的类及其说明。

Sr.No Class Name & Description
1

md-whiteframe-1dp

This styles a container for any HTML content with 1px bordered shadow. Adds zdepth of 1.
2

md-whiteframe-2dp

This styles a container for any HTML content with 2px bordered shadow. Adds zdepth of 2.
3

md-whiteframe-3dp

This styles a container for any HTML content with 3px bordered shadow. Adds zdepth of 3.
4

md-whiteframe-4dp

This styles a container for any HTML content with 4px bordered shadow. Adds zdepth of 4.
5

md-whiteframe-5dp

This styles a container for any HTML content with 5px bordered shadow. Adds zdepth of 5.
6

md-whiteframe-6dp

This styles a container for any HTML content with 6px bordered shadow. Adds zdepth of 6.
7

md-whiteframe-7dp

This styles a container for any HTML content with 7px bordered shadow. Adds zdepth of 7.
8

md-whiteframe-8dp

This styles a container for any HTML content with 8px bordered shadow. Adds zdepth of 8.
9

md-whiteframe-9dp

This styles a container for any HTML content with 9px bordered shadow. Adds zdepth of 9.
10

md-whiteframe-10dp

This styles a container for any HTML content with 10px bordered shadow. Adds z-depth of 10.
11

md-whiteframe-11dp

This styles a container for any HTML content with 11px bordered shadow. Adds z-depth of 11.
12

md-whiteframe-12dp

This styles a container for any HTML content with 12px bordered shadow. Adds z-depth of 12.
13

md-whiteframe-13dp

This styles a container for any HTML content with 13px bordered shadow. Adds z-depth of 13.
14

md-whiteframe-14dp

This styles a container for any HTML content with 14px bordered shadow. Adds z-depth of 14.
15

md-whiteframe-15dp

This styles a container for any HTML content with 15px bordered shadow. Adds z-depth of 15.
16

md-whiteframe-16dp

This styles a container for any HTML content with 16px bordered shadow. Adds z-depth of 16.
17

md-whiteframe-17dp

This styles a container for any HTML content with 17px bordered shadow. Adds z-depth of 17.
18

md-whiteframe-18dp

This styles a container for any HTML content with 18px bordered shadow. Adds z-depth of 18.
19

md-whiteframe-19dp

This styles a container for any HTML content with 19px bordered shadow. Adds z-depth of 19.
20

md-whiteframe-20dp

This styles a container for any HTML content with 20px bordered shadow. Adds z-depth of 20.
21

md-whiteframe-21dp

This styles a container for any HTML content with 21px bordered shadow. Adds z-depth of 21.
22

md-whiteframe-22dp

This styles a container for any HTML content with 22px bordered shadow. Adds z-depth of 22.
23

md-whiteframe-23dp

This styles a container for any HTML content with 23px bordered shadow. Adds z-depth of 23.
24

md-whiteframe-24dp

This styles a container for any HTML content with 24px bordered shadow. Adds z-depth of 24.

例

以下示例显示了阴影类的用法。

am_whiteframes.htm

现场演示

      
      
      
      
      
      
      
      
      
            
   
   
    
      

         
            .md-whiteframe-1dp
         
         
         
            .md-whiteframe-2dp
         
         
         
            .md-whiteframe-3dp
         
         
         
            .md-whiteframe-10dp
         
         
         
            .md-whiteframe-15dp
         
         
         
            .md-whiteframe-20dp
         
         
         
            .md-whiteframe-22dp
         
         
         
            .md-whiteframe-23dp
         
         
         
            .md-whiteframe-24dp

结果

验证结果。