我似乎找不到所有材料设计卡片高程度的官方CSS代码。
我已经阅读了这些答案,但它们与谷歌在http://www.google.com上搜索框上使用的box-shadow不一致。
谷歌在搜索框上使用的box-shadow CSS如下:
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
是否有适用于所有高程的官方CSS?
我似乎找不到所有材料设计卡片高程度的官方CSS代码。
我已经阅读了这些答案,但它们与谷歌在http://www.google.com上搜索框上使用的box-shadow不一致。
谷歌在搜索框上使用的box-shadow CSS如下:
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
是否有适用于所有高程的官方CSS?
ldpi @ 1.00dp = 0.75px = 1.00sp = 0.16mm = 0.01in = 0.45pt
mdpi @ 1.00dp = 1.00px = 1.00sp = 0.16mm = 0.01in = 0.45pt
tvdpi @ 1.00dp = 1.33px = 1.00sp = 0.16mm = 0.01in = 0.45pt
hdpi @ 1.00dp = 1.50px = 1.00sp = 0.16mm = 0.01in = 0.45pt
xhdpi @ 1.00dp = 2.00px = 1.00sp = 0.16mm = 0.01in = 0.45pt
xxhdpi @ 1.00dp = 3.00px = 1.00sp = 0.16mm = 0.01in = 0.45pt
xxxhdpi @ 1.00dp = 4.00px = 1.00sp = 0.16mm = 0.01in = 0.45pt
尝试使用以下转换来获取CSS中的盒子阴影大小。
注意:在桌面上,静止高度为0dp
您可以在这里找到官方高程指南:https://material.io/develop/web/components/elevation/
有一个样式库,您可以像这样安装它:npm install @material/elevation
$mdc-elevation-baseline-color: black;
$mdc-elevation-umbra-opacity: .2;
$mdc-elevation-penumbra-opacity: .14;
$mdc-elevation-ambient-opacity: .12;
$mdc-elevation-umbra-map: (
0: "0px 0px 0px 0px",
1: "0px 2px 1px -1px",
2: "0px 3px 1px -2px",
3: "0px 3px 3px -2px",
4: "0px 2px 4px -1px",
5: "0px 3px 5px -1px",
6: "0px 3px 5px -1px",
7: "0px 4px 5px -2px",
8: "0px 5px 5px -3px",
9: "0px 5px 6px -3px",
10: "0px 6px 6px -3px",
11: "0px 6px 7px -4px",
12: "0px 7px 8px -4px",
13: "0px 7px 8px -4px",
14: "0px 7px 9px -4px",
15: "0px 8px 9px -5px",
16: "0px 8px 10px -5px",
17: "0px 8px 11px -5px",
18: "0px 9px 11px -5px",
19: "0px 9px 12px -6px",
20: "0px 10px 13px -6px",
21: "0px 10px 13px -6px",
22: "0px 10px 14px -6px",
23: "0px 11px 14px -7px",
24: "0px 11px 15px -7px"
);
$mdc-elevation-penumbra-map: (
0: "0px 0px 0px 0px",
1: "0px 1px 1px 0px",
2: "0px 2px 2px 0px",
3: "0px 3px 4px 0px",
4: "0px 4px 5px 0px",
5: "0px 5px 8px 0px",
6: "0px 6px 10px 0px",
7: "0px 7px 10px 1px",
8: "0px 8px 10px 1px",
9: "0px 9px 12px 1px",
10: "0px 10px 14px 1px",
11: "0px 11px 15px 1px",
12: "0px 12px 17px 2px",
13: "0px 13px 19px 2px",
14: "0px 14px 21px 2px",
15: "0px 15px 22px 2px",
16: "0px 16px 24px 2px",
17: "0px 17px 26px 2px",
18: "0px 18px 28px 2px",
19: "0px 19px 29px 2px",
20: "0px 20px 31px 3px",
21: "0px 21px 33px 3px",
22: "0px 22px 35px 3px",
23: "0px 23px 36px 3px",
24: "0px 24px 38px 3px"
);
$mdc-elevation-ambient-map: (
0: "0px 0px 0px 0px",
1: "0px 1px 3px 0px",
2: "0px 1px 5px 0px",
3: "0px 1px 8px 0px",
4: "0px 1px 10px 0px",
5: "0px 1px 14px 0px",
6: "0px 1px 18px 0px",
7: "0px 2px 16px 1px",
8: "0px 3px 14px 2px",
9: "0px 3px 16px 2px",
10: "0px 4px 18px 3px",
11: "0px 4px 20px 3px",
12: "0px 5px 22px 4px",
13: "0px 5px 24px 4px",
14: "0px 5px 26px 4px",
15: "0px 6px 28px 5px",
16: "0px 6px 30px 5px",
17: "0px 6px 32px 5px",
18: "0px 7px 34px 6px",
19: "0px 7px 36px 6px",
20: "0px 8px 38px 7px",
21: "0px 8px 40px 7px",
22: "0px 8px 42px 7px",
23: "0px 9px 44px 8px",
24: "0px 9px 46px 8px"
);