css Google Material Design - Box Shadow Depths

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css Google Material Design - Box Shadow Depths相关的知识，希望对你有一定的参考价值。

.box-shadow-depth-1 {
    box-shadow: 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.12);
}

.box-shadow-depth-2 {
    box-shadow: 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23);
}

.box-shadow-depth-3 {
    box-shadow: 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23);
}

.box-shadow-depth-4 {
    box-shadow: 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22);
}

.box-shadow-depth-5 {
    box-shadow: 0 19px 60px rgba(0,0,0,0.3), 0 15px 20px rgba(0,0,0,0.22);
}

/* --------------------------------------------------------------------------- */
/* Mixins ::: Box Shadows
/* --------------------------------------------------------------------------- */
.box-shadow-1 { box-shadow: 0  1px  3px rgba(0,0,0,0.12), 0  1px  2px rgba(0,0,0,0.24) }
.box-shadow-2 { box-shadow: 0  3px  6px rgba(0,0,0,0.16), 0  3px  6px rgba(0,0,0,0.23) }
.box-shadow-3 { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0  6px  6px rgba(0,0,0,0.23) }
.box-shadow-4 { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22) }
.box-shadow-5 { box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22) }

以上是关于css Google Material Design - Box Shadow Depths的主要内容，如果未能解决你的问题，请参考以下文章

使用google api material icons在网页中插入图标

materialize-css 和 Material UI 的区别

Google Material Icons（字体）不会在 Mozilla Firefox 中呈现

带有 CDN 的 Material.io

使用 AppCompat/Material 主题膨胀类 com.google.android.material.appbar.AppBarLayout 时出错