CSS 阴影（高程） | Quasar Framework

为什么捐赠

如何贡献

选项与辅助工具

样式与标识

主题生成器

Sass/SCSS 变量

其他辅助类

布局与栅格

Vue 组件

Vue 指令

Quasar 插件

Vue 组合式函数

安全

Quasar CLI（Vite 版）

Quasar CLI（Webpack 版）

Icon Genie CLI

应用扩展

Quasar 工具函数

CSS 阴影（高程）

这是一个简单但有效的方式来添加阴影，以创建深度/高程效果。这些阴影符合 Material Design 规范（24 个深度级别）。

用法

CSS 类名	描述
`no-shadow`	移除所有阴影
`inset-shadow`	在顶部设置内阴影
`inset-shadow-down`	在底部设置内阴影
`shadow-1`	设置深度为 1
`shadow-2`	设置深度为 2
`shadow-N`	其中 `N` 是从 1 到 24 的整数
`shadow-transition`	在阴影上应用默认的 CSS 过渡效果

上述阴影指向元素的底部。如果您想要阴影指向元素的顶部，在数字前添加 up：

CSS 类名	描述
`shadow-up-1`	设置深度为 1
`shadow-up-2`	设置深度为 2
`shadow-up-N`	其中 `N` 是从 1 到 24 的整数

发现错误？在浏览器中编辑此页

1. Introduction

2. 用法