阴影与圆角系统
表达深度与层级一致的 elevation 阶与圆角令牌。
设计令牌入门
为什么
随机阴影（10 种不同模糊）和圆角（4px、6px、8px、12px 混用）让 UI 显得不精致。小 elevation 阶和 3 圆角表达深度与分组无需任意选择。
Tokens Studio（原 Figma Tokens）有 50 万以上安装量，W3C 设计令牌格式模块即将成为候选推荐。令牌从单一来源实现暗色模式、多品牌主题和平台一致性。
何时使用
随色阶一起定义阴影和圆角。若有 5+ 阴影定义，合并为 4-5 级 elevation 阶。
如何做
1. Elevation 阶 — none、sm（1px）、md（4px）、lg（8px）、xl（16px）— 映射 z-depth 含义
2. 阴影配方 — y 偏移 = 模糊/2、不透明 0.05-0.15、单一光源方向（左上）
3. 圆角阶 — sm=4、md=8、lg=12、full=9999（药丸）；最多 3-4 值
4. 按表面配对 — 卡片=md 圆角+sm 阴影、模态=lg 圆角+lg 阴影、下拉=sm 圆角+md 阴影
5. 暗色模式 — 阴影在暗色不可见；用 1px 边框 + 更亮表面替代
6. 令牌 — --shadow-{none|sm|md|lg|xl}、--radius-{sm|md|lg|full}
7. 强制 — stylelint 禁原始 box-shadow 和 border-radius 值
示例
/* shadow-radius-tokens.css */
:root {
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
--shadow-none: none;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 8px 0 rgb(0 0 0 / 0.08);
--shadow-lg: 0 8px 16px 0 rgb(0 0 0 / 0.10);
--shadow-xl: 0 16px 32px 0 rgb(0 0 0 / 0.12);
}
/* 表面配对 — 圆角 + 阴影共同表达深度 */
.card { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.dropdown{ border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.pill { border-radius: var(--radius-full); }
/* 暗色模式 — 阴影不可见，用边框 + 表面 elevation */
:root[data-theme="dark"] .card {
box-shadow: none;
border: 1px solid var(--color-border-subtle);
background: var(--color-surface-raised);
}
常见问题
- ⚠多光源方向 — 一阴影向右下，另一向左上，看起来破损
- ⚠暗色模式用阴影 — 不可见，elevation 丢失，模态对页面显得平
- ⚠圆角不一致 — 卡片 8px、头 6px、图 12px，看起来拼接
最佳实践
- ✓一光源方向、一阴影配方 — 阶中仅变 y 偏移和模糊
- ✓暗色模式用边框 + 表面色 elevation 替代阴影
- ✓圆角匹配父级 — 内部元素用相同或更小圆角，绝不用更大