CSS 阴影(高度)
添加阴影以创建深度/高度效果的简单而有效的方法。阴影符合 Material Design 规范(24 级深度)。
¥Simple yet effective way to add shadows to create a depth/elevation effect. The shadows are in accordance to Material Design specifications (24 levels of depth).
用法(Usage)
¥Usage
CSS 类名 | 描述 |
---|---|
no-shadow | 移除所有阴影 |
inset-shadow | 在顶部设置内嵌阴影 |
inset-shadow-down | 在底部设置内嵌阴影 |
shadow-1 | 设置深度为 1 |
shadow-2 | 设置深度为 2 |
shadow-N | 其中 N 是一个从 1 到 24 的整数。 |
shadow-transition | 在阴影上应用默认 CSS 过渡效果 |
上方阴影指向元素底部。如果你希望它们指向元素的顶部,请在数字前添加 up
:
¥The shadows above point towards the bottom of the element. If you want them to point towards the top of the element, add up
before the number:
CSS 类名 | 描述 |
---|---|
shadow-up-1 | 设置深度为 1 |
shadow-up-2 | 设置深度为 2 |
shadow-up-N | 其中 N 是一个从 1 到 24 的整数。 |