---
title: "层级"
description: "表示前后叠放次序的六个级别，以一圈细线圆环加上极柔和的阴影绘制，表面不叠加色调。"
url: "https://tanrei.chnotchy.com/zh-cn/foundations/elevation/"
last_updated: 2026-10-23T17:33:05.000Z
---

# 层级

> 表示前后叠放次序的六个级别，以一圈细线圆环加上极柔和的阴影绘制，表面不叠加色调。

层级（Elevation）描述的是哪个表面位于哪个表面之上。Tanrei 保留了 0 到 5 这六个语义级别，并以克制的方式来绘制它们。

| 令牌 | 浅色 | 深色 |
| --- | --- | --- |
| `--tanrei-sys-elevation-level0` |  |  |
| `--tanrei-sys-elevation-level1` | 0px 0px 0px 1px rgb(0 0 0 / 0.08) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) |
| `--tanrei-sys-elevation-level2` | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
| `--tanrei-sys-elevation-level3` | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06) |
| `--tanrei-sys-elevation-level4` | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06) |
| `--tanrei-sys-elevation-level5` | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06) |

生成自 `design/tokens/tanrei.light.tokens.json`, `design/tokens/tanrei.dark.tokens.json`, `tokens/sys/elevation.tokens.json`

## 先画圆环，再画阴影

零级以上的每个级别，都是一个由两类图层组成的复合阴影令牌：

1. 一圈 **1px 的圆环**，使用 `elevation-ring` 角色，无论在什么背景上都能清晰地勾勒出边缘；
2. 一到两层**极柔和、不透明度很低的阴影**，随级别升高而变大。

圆环始终是第一层。无法绘制阴影扩展（spread）的平台，把它渲染为一像素的边框，其余部分保持不变。

## 不叠加色调

抬升的表面不会叠加主色的色调。纵深由圆环、阴影，以及在需要时沿表面容器阶梯上移一级来表达。这样，中性的表面始终保持中性。

## 在深色主题中

在接近黑色的背景上，阴影很难看清。因此在深色主题中，主要靠圆环起作用，抬升的表面同时也会换用更亮一级的容器角色。

## 如何使用层级

| 级别 | 典型用途 |
| --- | --- |
| 0 | 页面，以及与页面齐平的一切 |
| 1 | 静止状态的卡片、分段控件中被选中的选项 |
| 2 | elevated 按钮、悬停时抬起的卡片 |
| 3 | 菜单、弹出框、消息条 |
| 4–5 | 对话框、面板以及其他模态表面 |

一个屏幕上使用的级别越少越好。如果相邻的两个元素需要区分开，而它们都不是浮起的，就改用细线。