CSS阴影(立面图)

简单而有效的方法来添加阴影以创建深度/拔高效果。
阴影符合Material Design规范(24级深度)。

不要忘记查看演示。

CSS类名 说明
no-shadow 移除任何阴影
inset-shadow 设置一个插入阴影
shadow-1 设置1的深度
shadow-2 设置2的深度
shadow-N 其中N是1到24的整数
shadow-transition 在阴影上应用CSS转换; 最好与hoverable类一起使用

例子:

<div class="shadow-1">...</div>

上面的阴影指向元素的底部。 如果您希望它们指向元素的顶部,请在数字前加上up

CSS类名 说明
shadow-up-1 设置1的深度
shadow-up-2 设置2的深度
shadow-up-N 其中N是1到24的整数