前端

圆角的气质Corner Feel

你可能会说

全站的圆角统一一下，别有的方有的圆，看着乱。

圆角的气质是指不同圆角大小在界面中带来的视觉感受和一致性规则较小圆角常显得克制，较大圆角常显得柔和，可为按钮、卡片和输入框建立少量圆角 Border Radius档位。它们是设计经验，不是固定语义；相同角色应保持一致，具体数值仍要结合组件尺寸、品牌和场景测试。

按钮直角 · 边缘清楚按钮较小圆角按钮较大圆角按钮胶囊轮廓

组成结构 · Anatomy

半径为 0；可与边框、字重和间距共同形成更硬朗的轮廓

相对组件尺寸较小的半径，适合需要保留边缘感的界面元素

半径占尺寸的比例更高；和组件比例、间距一起检查

半径至少接近高度的一半，形成两端圆弧的形状

常见变体 · Variants

直角Sharp

需要清楚边缘或与既有直角系统保持一致时

较小圆角Subtle

需要保留边缘感，同时略微柔化轮廓时

较大圆角Rounded

组件尺寸允许更明显圆弧，且与系统其他角色协调时

胶囊Pill

长条标签或按钮需要两端完整圆弧时

典型使用场景

金融与工程工具

大额转账复核 待确认

收款方恒晟贸易有限公司

金额¥ 500,000.00

企业 SaaS 界面

新建报销单 ×

消费级 App

周末徒步 · 云海线

2.3 万人想去 · 难度 ★★

理想工位大赏

8,412 人看过 · 家居

儿童与社交产品

小豆丁

3 分钟前 · 亲子乐园

Lv.6

今天拼完了一整座恐龙城堡，太有成就感啦！