Elevation and Depth 是一套关于界面层级与阴影的设计规范，核心目标是通过阴影和分层来传达元素位于基础表面之上，为 UI 赋予物理深度感。当它与 border-radius 结合使用时，可以营造出卡片可抓取、模态框明显悬浮、下拉菜单像是出现在内容上方的触觉质感。
用途
该规范用于指导界面中浮动元素的视觉表达，适用于设计卡片、下拉菜单、模态框、提示框或任何浮动元素。它帮助设计者和开发者建立统一的层级语言，让用户能够直观理解元素之间的空间关系。
主要能力
层级刻度
规范定义了一小组层级级别作为设计令牌（token），每个级别映射到特定的 UI 角色：
- 0 级：--shadow-none，无阴影，用于平面表面、内联元素
- 1 级：--shadow-xs，0 1px 2px rgba(0,0,0,0.06)，用于细微卡片、表格行悬停
- 2 级：--shadow-sm，0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)，用于卡片、输入框聚焦环区域
- 3 级：--shadow-md，0 4px 6px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06)，用于下拉菜单、弹出框
- 4 级：--shadow-lg，0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)，用于模态框、对话框、侧边抽屉
- 5 级：--shadow-xl，0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04)，用于命令面板、全屏遮罩
规范强调阴影应保持细微，深色厚重的阴影显得过时且视觉上具有攻击性，轻盈扩散的阴影则更现代、更有材质感。
阴影加边框规则
白色表面上的细微阴影有时会“被冲淡”，使卡片边缘显得模糊不清。规则是：对于有层级的白色卡片或区块，将阴影与 1px 边框搭配使用，边框颜色比阴影核心色调稍深（1.5 到 2 倍），例如 #E2E8F0 或 grey-200 这样的中灰色。效果是边框定义卡片的物理边界，阴影提供深度，两者结合比单独使用任一种都更清晰。
悬停需要明确边缘
悬停时改变背景色的卡片必须有明确边缘——边框、阴影或清晰的圆角边界。没有边缘时，颜色变化没有形状，会被读作杂散的填充而非高亮卡片。在无边框的平面卡片上，禁止使用背景色变化的悬停效果，应改用边框或悬停时的阴影（层级）。
细微渐变增强深度
渐变可以为界面带来“生动感”并强化层级感。光照隐喻：从上到下的细微线性渐变，顶部稍亮，模拟自然顶光，使表面比纯色填充更有物理感和层级感。5% 规则：渐变应极其细微，顶部和底部之间明度变化仅 2–5% 通常就足够。如果用户能轻易看出渐变的起止位置，可能就太重了。适用于主按钮、主视觉卡片和页头区块，以改善视觉层次和品牌个性。
层级与圆角搭配
圆角和阴影共同定义表面的特征，组合方式传达元素角色和产品视觉基调：
- 内联标签/徽章：无阴影，--radius-full（胶囊形），扁平轻量
- 卡片：--shadow-sm，--radius-md（8–12px），可抓取、有边界
- 下拉菜单/弹出框：--shadow-md，--radius-md（8px），悬浮、上下文相关
- 模态框/对话框：--shadow-lg，--radius-lg（12–16px），突出、聚焦
- 提示/通知：--shadow-md，--radius-md，短暂、位于内容上方
- 按钮：无阴影或 --shadow-xs，所有按钮保持一致
粗强调边框与圆角不可共边
不要在圆角盒子的一侧使用厚重的彩色边框。边框会斜接：强调色与相邻边相遇处渲染器会切出对角线接缝，圆角会将接缝弯成曲线，导致强调色在角落结束前明显变窄并剥离。8px 圆角上的 4px 边缘大部分长度都在渐缩。应给强调色独立的填充元素，如条状或色块，由容器圆角干净裁剪，或在强调色经过处保持盒子为直角。填充没有斜接也没有渐缩。
圆角一致性规则
按钮圆角在产品内不得变化。所有按钮——主要、次要、危险、幽灵——使用相同的圆角令牌。按钮类型之间圆角不同会破坏视觉一致性，暗示不存在的语义差异。
正确示例：
/* Correct: one radius for all buttons */ .btn { border-radius: var(--radius-button); }
错误示例：
/* Wrong: different radii for different button variants / .btn-primary { border-radius: 8px; } .btn-secondary { border-radius: 4px; } / ← breaks consistency */
按钮圆角令牌是品牌决策——设定一次，处处应用。
文字阴影用于对比和分离
text-shadow 可以在不改变颜色的情况下将文字从背景中提升出来，适用于对比度勉强或文字位于照片、渐变、复杂背景上的情况。效果必须让人察觉不到是阴影。如果用户注意到阴影，就太强了。
/* On images or complex backgrounds */ .hero-title { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
/* Very subtle separation from a near-matching background */ .label-on-tinted-surface { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
/* White text on light background — use a dark shadow, not white */ .inverted-text { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30); }
规则：不透明度保持在 0.30 以下，超过则会被读作设计选择而非精修；模糊最大 2–4px，更高值会让文字显得脏；偏移使用 0 1px 或 0 0，超过 2px 的方向性偏移看起来像复古 Web 2.0；绝不用 text-shadow 弥补对比度失败——先修复颜色。仅在颜色已接近通过、需要微调时使用，或文字位于不可预测的图像上时使用。
深色模式阴影
阴影在深色背景上不太可见。在深色表面上，通过以下方式补偿：阴影值使用稍高的不透明度；添加细微边框（1px solid rgba(255,255,255,0.08)）定义卡片边缘；为达到相同感知深度，将层级提高一级。
使用方式
该规范以设计令牌和 CSS 代码片段的形式提供指导。使用者需要定义一套层级刻度作为设计令牌，而非为每个组件单独设置阴影值。规范提供了具体的 CSS 代码示例，包括按钮圆角令牌和文字阴影的写法。
适用场景
适用于任何需要表达界面层级关系的设计场景，包括卡片、下拉菜单、模态框、提示框、按钮、通知等浮动元素的设计。也适用于深色模式下的界面设计。
限制
规范强调阴影应保持细微，避免厚重黑色默认值；渐变应极其细微；文字阴影不应用于弥补对比度失败；按钮圆角必须统一。规范还列出了常见反模式，如主要和次要按钮使用不同圆角、使用厚重阴影、无论角色如何给每个元素加阴影、白色背景上无层级的平面卡片等，并给出了相应的修复建议。
评审清单
- 是否有定义好的层级刻度作为设计令牌（而非每个组件单独设置阴影值）？
- 每个有层级的元素是否使用了适合其角色的正确级别（卡片 ≠ 模态框）？
- 阴影是否轻盈扩散，避免厚重的黑色（#000）默认值？
- 对于浅色背景上的白色卡片，阴影是否搭配了 1px 边框以获得更好的定义？
- 所有按钮变体的 border-radius 是否一致？
- 阴影是否感觉细微扩散而非厚重深色？
- 在深色表面上，卡片/面板边缘是否通过边框或调整后的阴影可见？
- 层级是否用于传达分层——而不仅仅是装饰？
- 如果使用渐变，是否细微（2–5% 明度变化）并用于强化光照/层级隐喻？