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的整数 |