圆角
Border Radius
别名:圆角圆角半径为什么卡片看起来不精致按钮圆角胶囊形状border radiusrounded cornerscorner radius
这是什么
把盒子四角做成圆弧，半径越大越柔和、越像卡片与气泡。圆角要和组件尺寸成套：按钮小、卡片中、大容器大，才像同一个家族；相邻圆角盒之间会留下难看的凹口，需要用同心圆角（外半径 = 内半径 + 间距）修正，或让它们干脆对齐。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 需要柔化品牌气质，并区分卡片、按钮与容器的层级
- 按钮、输入框、头像等基础控件要统一圆角语言
- 嵌套容器需要同心圆角，保持内角与外角视觉顺滑
✕ 不适用场景
- 严肃的数据表格与像素级对齐的网格
- 12px 的小图标上加大圆角，反而糊成一团
- 用超大圆角把方形卡片压成胶囊，丢掉信息密度
常见形式
柔和小圆角
Soft
4～8px，克制、专业，适合表格与密集控件
圆润中圆角
Rounded
12～16px，卡片与面板的常用档，友好但不轻浮
胶囊与圆形
Pill & circle
9999px 或 50%，用于按钮、标签和头像
实现要点
border-radius: 8pxborder-radius: 0.5remborder-radius: 9999pxborder-radius: 50%border-radius: calc(var(--radius-md) - var(--space-2))用 rem 定义 4～5 档：--radius-sm 4px、--radius-md 8px、--radius-lg 12px、--radius-xl 16px、--radius-full 9999px。组件的圆角跟随自身尺寸取档，父容器圆角明显时内层用 calc(var(--radius-lg) - var(--space-2)) 做同心。头像与开关用 50% 或 --radius-full。密切注意 1px 边框下的圆角抗锯齿，必要时内层留 1px。
平台 API
border-radiusborder-start-start-radius50%--radius-lg代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| CSS | border-radius 支持斜杠语法分别控制横纵半径 |
| Tailwind CSS | rounded-lg / rounded-full 成档的圆角工具类 |
| Design tokens | --radius-sm / --radius-md / --radius-full |
相关概念
用一组固定的间距档位（如 4、8、12、16、24、32、48px，通常按 4 或 8 的倍数生长）统一控制 padding、margin 与 gap。所有留白都从同一把尺子里取，而不是随手写数值，疏密节奏才稳定；间距同时承担分组，间距越大，元素之间的关系越疏远。
基础相似概念用阴影的深浅表达元素离纸面的远近：0 贴平、1～2 浮起、3 以上成浮层。一套阴影由本影、半影、环境三层叠加而成，档位越高投影越大越淡。层级只用来表达叠放关系，不要拿它当装饰。
基础搭配使用用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件搭配使用用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件搭配使用