圆角Border Radius

圆角实验台：一个 token 管住一族组件

任务是为「项目申请卡」定圆角。选一个 token 档位，卡片、输入、按钮同步倒角；再试「把胶囊当默认」看它为什么塌掉。倒角、徽章和例外标记都长在卡片物件上。

面板里读到的结论

刚才的倒角和徽章对应四条判断：同层级共享 token、档位有限、胶囊是例外、圆形专用于头像。

• 同层级共享 token：按钮、输入、卡片用同一个半径，调一处全族同步——这是 token 化，不是随手写数。
• 档位有限：0 / 4 / 8 / 16 已覆盖锐利到柔和；超过 16 多数会越过组件半高，自动变成胶囊。
• 胶囊（999）是例外：只给短标签、状态、短操作；套到大容器上会显廉价，不能当默认。
• 圆形（50%）是例外：给方形头像、图标容器；它依赖元素等宽等高，不是通用圆角值。

什么时候专门定圆角

看到同页组件圆角各写各的、或为了「亲切」把所有卡片都套胶囊时做；纯数据展示、锐利品牌站点不必往柔和方向调。

怎么从组件走到 token

从这一页的真实组件走到半径值的最短路径。

1. 列出页面所有要倒角的组件，按「同层级」分组：容器（卡片/弹层）、操作（按钮/输入）、例外（标签/头像）。
2. 给容器和操作各选一个有限 token（如 8 或 12），同组共享；不要给单个按钮写独立值。
3. 例外单独定义：标签 999 胶囊、头像 50% 圆形，并在 token 表里标注「例外」。
4. 核对半径与尺寸：半径不超过组件最小边的 1/2，否则会越过边框意外胶囊化。
5. 真实屏复检：图片裁切、焦点轮廓、可点击边界是否被圆角切掉。

盯这些关注点

定圆角时常只盯「够不够柔和」，胶囊滥用、裁切和焦点更容易出问题。

• 盯胶囊是否被当默认：大面积胶囊（卡片、长输入）是廉价感的主要来源。
• 盯半径与尺寸关系：半径 ≥ 最小边 1/2 时形状会胶囊化，常是意外。
• 盯焦点和可点击区：焦点轮廓和点击热区不要被圆角裁掉或藏进背景。
• 盯内容裁切：图片、视频的 overflow 裁切要与半径一致，否则角落漏色。

同一张申请卡：正例与反例

目标都是让用户认出主操作。差异只在胶囊是「例外」还是「默认」。