css 材料设计阴影
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 材料设计阴影相关的知识，希望对你有一定的参考价值。
/* Material Design Shadow level 1 to 5 */
:root {
--md-shadow-1: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
--md-shadow-2: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
--md-shadow-3: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
--md-shadow-4: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
--md-shadow-5: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
}
以上是关于css 材料设计阴影的主要内容，如果未能解决你的问题，请参考以下文章
如何在android材料设计风格中创建按钮阴影
如何使用材料设计卡制作阴影？
text 材料设计阴影
Android：如何使用 XML drawable 创建精确的材料设计阴影
css3如何实现边框阴影
用 CSS 设计漂亮的阴影，css阴影和原理，所有知识点多图动画演示