Skip to content
On this page

圆角

圆角度决定了界面中从组件到容器卡的圆角大小,根据层级、面积的不同,圆角的圆度应有差异,以在嵌套中达到视觉的协调。

天合设计体系圆角梯度以2为基数递进,共给出常用7档圆角值提供使用。

以下是圆角使用参数列表:

圆角值使用场景
R1=0特殊场景:需要强调硬朗风格的边框或分割线
R2=2px小号尺寸组件:例如高度为24px的按钮、选择器、输入框、搜索框等
R3=4px常规尺寸组件:按钮、选择器、输入框、气泡等
R4=6px组件:对话框、页面容器卡片等
R5=8px大型容器:面板、卡片列表、抽屉等
R6=10px页面级容器:模态框、侧边栏、整页卡片等
R7=1/2h圆形元素:头像、圆形按钮、标记点等(h为元素高度)