圆角

Border Radius

也常被叫作：圆角弧度边框圆角圆润一点角的弧度

风格与视觉通常止于「主路径」约 1 分钟读完

你可能会这么说

「卡片、按钮的四个角太尖了，想让它更圆润一点。」

圆角 Border Radius

元素边角的弧度，决定卡片和按钮看起来是硬朗还是柔和。

圆角是元素边角的弧度，用一个数字表示角被削成多圆：0 是直角，数值越大越圆，大到足够时边会变成圆形或胶囊形。它纯粹是外观问题——不改变元素大小、不改变功能，只改变它看起来是「方」还是「圆」。「这个按钮有点尖」翻译成设计语言就是「圆角太小」。「我想要个胶囊形的按钮」翻译过来就是「圆角设成高度的一半」。

圆角看起来是小事，但它是风格里最能改变观感的一项。直角（0）显得硬朗、机械、偏工具风；大圆角显得柔和、友好、偏消费产品。同一个页面如果有的地方 2px、有的地方 8px、有的地方 16px，会明显不一致。好的做法和间距一样：用一套固定的圆角档位，比如 4 / 8 / 12 / 16，各组件对号入座。

给 AI 下单时，别只写「弄圆一点」。因为「圆一点」是感受词，不同组件应该用不同档位——按钮、输入框、卡片、弹窗通常依次递增。你要做的是给它一套档位规则，而不是让它每个都随便挑一个数。

长什么样真实可交互，不是截图

圆角档位统一

小中大

各随机挑数

2px11px23px

左：三个圆角都来自同一套档位，一眼看是「一套设计」。右：2、11、23 三个随机数，每个都不算错，但合在一起就露馅——像三套风格拼的。

拆开看，里面有这几块

1
弧度值 Radius
角被削圆的程度，通常单位是 px。0 是直角，值越大越圆。
2
档位 Scale
全站共用的几个圆角档位（如 4/8/12/16），保证各组件一致。

常见的有哪几种

直角None / 0

完全没弧度，硬朗、机械。

用在：数据表、工具型后台、需要显得专业的场景

小圆角Small

轻微弧度，去掉「过尖」但保持硬朗。

用在：输入框、按钮、一般控件

大圆角Large

明显弧度，柔和友好。

用在：卡片、弹窗、消费产品页面

胶囊Pill

圆角设成高度的一半，两端呈半圆。

用在：标签、单个的操作按钮、徽标

容易搞混？这样区分

圆角 ≠ 间距 Spacing

间距是元素之间的距离（空隙），圆角是元素边角的弧度（形状）。间距解决「排布乱不乱」，圆角解决「看起来尖不尖」。间距不改变元素本身的样子，圆角只改边角不改位置。

看间距

圆角 ≠ 阴影 Box Shadow

圆角改的是形状，阴影是元素背后的光晕/投影。很多人把「柔和一点」理解成加阴影，结果既改形状又加投影，两件事混在一起。给 AI 下单时要说清你要的是哪个。

什么时候用得上

按钮胶囊化

想要一个像 app 里那种两头半圆的按钮，就是把圆角设成按钮高度的一半。

卡片统一

页面上多张卡片圆角都不一样，让它们都归到一个档位。

表单控件

输入框和按钮用同一档位圆角，它们并排时边缘才对得齐。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【任务】给 [组件范围] 统一一套圆角档位，不要每个都随手挑数字
【档位规则】全站只允许 [4 / 8 / 12 / 16] 这几个值，并按这个分配：
  - 输入框、按钮 = 最小档位
  - 卡片 = 中间档位
  - 弹窗 = 较大档位
【目标】告诉我要把每个组件的圆角从多少改成多少，先给我一份档位对照表确认，再动手
【边界】只改 border-radius，不动间距、颜色、阴影、字号；不改元素尺寸和布局
【特例】标签类元素用胶囊形（圆角 = 高度的一半），算作单独一类
【交付】列出改了哪些文件、每处从什么值改成什么值；浏览器里哪个地址哪几个组件能看到区别；你没验证的部分单独说

给它一套「档位 + 每个档位给谁用」的规则，它就不会每个组件拍脑袋挑一个数。同时把它要先报对照表写成了硬要求，防止它直接批量改完不给你看。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。

要亲眼看到这些，才算数

打开开发者工具选中组件，圆角值应该只出现在你定的那套档位里（如 4/8/12/16），而不是 2、11、23。
同类型组件（所有输入框、所有卡片）圆角值一致，不像三套风格拼的。
并排的输入框和按钮圆角档位一致，边缘对得齐。
标签类元素是胶囊形：圆角约等于高度的一半，两端是半圆。
缩放浏览器，圆角值不会突然在某宽度变成别的数。

它常这么糊弄你

「圆角已统一」——随手一查，几个组件是 4、8、16，卡片却是 20。值不算错，但不在一套档位里。逐处查。
把「圆润一点」理解成加了更大的阴影和投影，实际只想要圆角。验收时看的是 border-radius，不是阴影。
为了显得柔和把圆角全拉到超大，输入框和按钮都变成圆滚滚的胶囊，专业感没了。档位不是越大越好。
只在样式变量里改了一个值，实际某些组件硬编码了自己的圆角，没继承到。

圆角是纯视觉任务，最高能验到「主路径」层：浏览器开发者工具里选中元素看 border-radius 的真实像素值，自己就能查，不用问 AI。重点查「是不是都落在同一套档位里」而不是「每个值合不合理」。

考考你选一个你觉得对的

想要一个「像 iOS 里那种两端是半圆的按钮」，应该把 border-radius 设成多少？

想再深挖一点靠谱出处

border-radius（MDN）MDN ↗Shape & corners（形状与圆角）Material Design ↗

# 圆角 (Border Radius)

> 元素边角的弧度，决定卡片和按钮看起来是硬朗还是柔和。

**你可能会这么说**：卡片、按钮的四个角太尖了，想让它更圆润一点。

圆角是元素边角的弧度，用一个数字表示角被削成多圆：0 是直角，数值越大越圆，大到足够时边会变成圆形或胶囊形。它纯粹是外观问题——不改变元素大小、不改变功能，只改变它看起来是「方」还是「圆」。「这个按钮有点尖」翻译成设计语言就是「圆角太小」。「我想要个胶囊形的按钮」翻译过来就是「圆角设成高度的一半」。 圆角看起来是小事，但它是风格里最能改变观感的一项。直角（0）显得硬朗、机械、偏工具风；大圆角显得柔和、友好、偏消费产品。同一个页面如果有的地方 2px、有的地方 8px、有的地方 16px，会明显不一致。好的做法和间距一样：用一套固定的圆角档位，比如 4 / 8 / 12 / 16，各组件对号入座。 给 AI 下单时，别只写「弄圆一点」。因为「圆一点」是感受词，不同组件应该用不同档位——按钮、输入框、卡片、弹窗通常依次递增。你要做的是给它一套档位规则，而不是让它每个都随便挑一个数。

**也叫**：圆角弧度、边框圆角、圆润一点、角的弧度

## 你可以这样告诉 AI

```text
【任务】给 [组件范围] 统一一套圆角档位，不要每个都随手挑数字
【档位规则】全站只允许 [4 / 8 / 12 / 16] 这几个值，并按这个分配：
  - 输入框、按钮 = 最小档位
  - 卡片 = 中间档位
  - 弹窗 = 较大档位
【目标】告诉我要把每个组件的圆角从多少改成多少，先给我一份档位对照表确认，再动手
【边界】只改 border-radius，不动间距、颜色、阴影、字号；不改元素尺寸和布局
【特例】标签类元素用胶囊形（圆角 = 高度的一半），算作单独一类
【交付】列出改了哪些文件、每处从什么值改成什么值；浏览器里哪个地址哪几个组件能看到区别；你没验证的部分单独说
```

## 怎么验证他真的做到了

通常止于层级：**主路径** — 真实用户的正常操作能走通，不靠特殊参数

- [ ] 打开开发者工具选中组件，圆角值应该只出现在你定的那套档位里（如 4/8/12/16），而不是 2、11、23。
- [ ] 同类型组件（所有输入框、所有卡片）圆角值一致，不像三套风格拼的。
- [ ] 并排的输入框和按钮圆角档位一致，边缘对得齐。
- [ ] 标签类元素是胶囊形：圆角约等于高度的一半，两端是半圆。
- [ ] 缩放浏览器，圆角值不会突然在某宽度变成别的数。

常见糊弄：
- 「圆角已统一」——随手一查，几个组件是 4、8、16，卡片却是 20。值不算错，但不在一套档位里。逐处查。
- 把「圆润一点」理解成加了更大的阴影和投影，实际只想要圆角。验收时看的是 border-radius，不是阴影。
- 为了显得柔和把圆角全拉到超大，输入框和按钮都变成圆滚滚的胶囊，专业感没了。档位不是越大越好。
- 只在样式变量里改了一个值，实际某些组件硬编码了自己的圆角，没继承到。

来源：https://mickerbook.com/reference/t/border-radius/