这是一个简单但有效的方式来添加阴影，以创建深度/高程效果。 这些阴影符合 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 的整数 |
阴影颜色 v2.31+
阴影颜色是声明在 :root 上的 CSS 自定义属性：亮色模式下为 --q-shadow-color（默认 #000），暗黑模式下为 --q-dark-shadow-color（默认 #fff）。在 :root 或 body 上覆盖它们即可为所有阴影重新着色（或用 transparent 移除阴影）。阴影色调是在 body 层级从它们派生出来的，因此放在 DOM 更深处的覆盖不会生效。
:root {
--q-shadow-color: #1a237e;
}
body.body--dark {
--q-dark-shadow-color: #000;
}