Radius Tokens
圆角 Token 系统,定义了不同层级的圆角大小,为界面元素提供统一且柔和的视觉效果。
基础用法
Tip
点击卡片可复制 token 名称
rounded-xs
2pxPreview
Border Radius2px
rounded-sm
4pxPreview
Border Radius4px
rounded
8pxPreview
Border Radius8px
rounded-md
8pxPreview
Border Radius8px
rounded-lg
12pxPreview
Border Radius12px
rounded-xl
16pxPreview
Border Radius16px
rounded-full
9999pxPreview
Border Radius9999px
设计规范
圆角层级
系统提供 7 个圆角层级,从极小圆角 (2px) 到完全圆角 (9999px),适用于各种 UI 元素:
使用指南
- 保持一致性:同一类型的元素应使用相同的圆角值
- 层级关系:圆角大小应与元素尺寸成正比
- 视觉平衡:过大的圆角在矩形元素上可能显得突兀
设计建议
选择合适的圆角
- 小元素 (按钮、标签):使用
rounded-sm或rounded - 中等元素 (卡片、面板):使用
rounded或rounded-lg - 大元素 (弹窗、容器):使用
rounded-lg或rounded-xl - 圆形元素 (头像、图标):使用
rounded-full