#Radius Tokens

圆角 Token 系统，定义了不同层级的圆角大小，为界面元素提供统一且柔和的视觉效果。

#基础用法

#设计规范

#圆角层级

系统提供 7 个圆角层级，从极小圆角 (2px) 到完全圆角 (9999px)，适用于各种 UI 元素：

#使用指南

1. 保持一致性：同一类型的元素应使用相同的圆角值
2. 层级关系：圆角大小应与元素尺寸成正比
3. 视觉平衡：过大的圆角在矩形元素上可能显得突兀

#设计建议

#选择合适的圆角

• 小元素 (按钮、标签)：使用 rounded-sm 或 rounded
• 中等元素 (卡片、面板)：使用 rounded 或 rounded-lg
• 大元素 (弹窗、容器)：使用 rounded-lg 或 rounded-xl
• 圆形元素 (头像、图标)：使用 rounded-full

#组合使用

// 按钮使用默认圆角
<button className="rounded">按钮</button>

// 卡片使用大圆角
<div className="rounded-lg">卡片内容</div>

// 头像使用完全圆角
<img className="rounded-full" src="avatar.jpg" />

#嵌套圆角最佳实践

当使用嵌套元素时，正确计算外层和内层的圆角值非常重要：

#计算公式

外层圆角 = 内层圆角 + padding

#图示说明