CSS Shadows (Elevation)
Quasar 提供了 css 工具类帮助给 DOM 添加阴影,使用起来简单又高效,并且这些阴影遵循 Material Design 的设计规范(将阴影分为 24 个等级,数字越大,阴影越深)
用法
CSS 类名 | 描述 |
---|---|
no-shadow | 移除阴影 |
inset-shadow | 在 DOM 的上方添加嵌入式风格的阴影 |
inset-shadow-down | 在 DOM 的下方添加嵌入式风格的阴影 |
shadow-1 | 1 级阴影 |
shadow-2 | 2 级阴影 |
shadow-N | N 可以被替换为 1 到 24 之间的整数,表示阴影的等级,数字越大,阴影越深 |
shadow-transition | 给 CSS 阴影添加默认的过渡效果 |
.shadow-1
.shadow-2
.shadow-3
.shadow-4
.shadow-5
.shadow-6
.shadow-7
.shadow-8
.shadow-9
.shadow-10
.shadow-11
.shadow-12
.shadow-13
.shadow-14
.shadow-15
.shadow-16
.shadow-17
.shadow-18
.shadow-19
.shadow-20
.shadow-21
.shadow-22
.shadow-23
.shadow-24
上面的示例中,阴影都被添加到了元素的下方,若您想把阴影添加到元素的上方,可以通过在数字前加上up
来实现。例如:
CSS 类名 | 描述 |
---|---|
shadow-up-1 | 1 级阴影 |
shadow-up-2 | 2 级阴影 |
shadow-up-N | N 可以被替换为 1 到 24 之间的整数,表示阴影的等级,数字越大,阴影越深 |
.shadow-up-1
.shadow-up-2
.shadow-up-3
.shadow-up-4
.shadow-up-5
.shadow-up-6
.shadow-up-7
.shadow-up-8
.shadow-up-9
.shadow-up-10
.shadow-up-11
.shadow-up-12
.shadow-up-13
.shadow-up-14
.shadow-up-15
.shadow-up-16
.shadow-up-17
.shadow-up-18
.shadow-up-19
.shadow-up-20
.shadow-up-21
.shadow-up-22
.shadow-up-23
.shadow-up-24
.inset-shadow
.inset-shadow-down