物料设计高程正确CSS

Question

我似乎找不到用于材料设计卡的所有框形阴影的任何官方CSS代码。

计算所有“材料设计”立面的阴影值

我已经阅读了这些答案，但当我进行快速检查时，它们与Google在http://www.google.com的搜索框中使用的阴影不符。

Google在搜索框上使用的框阴影是以下CSS：

box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);

是否有适用于所有海拔的官方CSS？

Answer 1

根据Google 的https://material.io/design/environment/elevation.html ，卡片 在静止时应具有2dp的高度，在抬起时应具有8dp的高度。

根据https://pixplicity.com，

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