css3 – 材料设计高程正确的CSS

2023年3月3日 282次阅读

我似乎找不到任何官方CSS代码用于所有用于Material Design的卡片提升的盒子阴影.

Calculating shadow values for all Material Design elevations

我已经阅读了这些答案,但是当我快速检查时,它们与http://www.google.com在搜索框中使用的盒子阴影不一致.

谷歌在搜索框中使用的框阴影就是这个CSS：

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

所有海拔都有官方CSS吗？

最佳答案 根据Google的
https://material.io/guidelines/,休息时卡片的高度应为2dp,抬起时卡片的高度应为8dp.

《css3 – 材料设计高程正确的CSS》

根据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中的框阴影大小.

Note: On desktop, the resting elevation is 0dp

祝好运 ：)

点赞