CSS Shadows (Elevation)

Quasar 提供了 css 工具类帮助给 DOM 添加阴影,使用起来简单又高效,并且这些阴影遵循 Material Design 的设计规范(将阴影分为 24 个等级,数字越大,阴影越深)

用法

CSS 类名描述
no-shadow移除阴影
inset-shadow在 DOM 的上方添加嵌入式风格的阴影
inset-shadow-down在 DOM 的下方添加嵌入式风格的阴影
shadow-11 级阴影
shadow-22 级阴影
shadow-NN可以被替换为 1 到 24 之间的整数,表示阴影的等级,数字越大,阴影越深
shadow-transition给 CSS 阴影添加默认的过渡效果


<template>
  <div class="q-pa-md">
    <div
      class="flex inline shadow-box flex-center"
      v-for="n in 24" :key="n"
      :class="`shadow-${n}`"
    >
      .shadow-{{ n }}
    </div>
  </div>
</template>

.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-11 级阴影
shadow-up-22 级阴影
shadow-up-NN可以被替换为 1 到 24 之间的整数,表示阴影的等级,数字越大,阴影越深


<template>
  <div class="q-pa-md">
    <div
      class="flex inline shadow-box flex-center"
      v-for="n in 24" :key="n"
      :class="`shadow-up-${n}`"
    >
      .shadow-up-{{ n }}
    </div>
  </div>
</template>

.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


<template>
  <div class="q-pa-md q-gutter-md">
    <div class="inset-shadow flex inline shadow-box flex-center doc-inset-shadow">
      .inset-shadow
    </div>

    <div class="inset-shadow-down flex inline shadow-box flex-center doc-inset-shadow">
      .inset-shadow-down
    </div>
  </div>
</template>

.inset-shadow
.inset-shadow-down