# CSS 圆角生成器使用教程：可视化调节圆角，一键复制 border-radius 代码
> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/css-border-radius-generator-guide
## 工具简介
**CSS 圆角生成器**是工具派推出的一款可视化 CSS 辅助工具：不用手写 `border-radius` 数值，只要在页面上拖一拖滑杆、点一点预设，右侧就能实时看到圆角效果，并自动生成可以直接粘贴到项目里的 CSS 代码。它支持**统一圆角**和**四角独立调节**两种模式，四角模式下每个角还能分别设置水平半径和垂直半径，轻松做出椭圆角、水滴形等不规则圆角效果，全程在浏览器本地运行，打开即用、无需安装。
## 功能亮点
- **两种调节模式**：勾选「统一圆角」时一个滑杆同时控制四个角；取消勾选后可对左上、右上、右下、左下四个角分别调节。
- **水平 / 垂直双半径**：四角独立模式下每个角都有「水平半径」和「垂直半径」两个滑杆，可生成标准的椭圆角语法（`水平半径 / 垂直半径`）。
- **双单位支持**：数值单位可选 `px`（0–1000）或 `%`（0–100），百分比适合做响应式圆角和正圆。
- **实时预览**：右侧预览区即时反映调节结果，可选正方形、长方形、圆形三种预览形状，还能自定义方块色与背景色，方便对比不同场景下的观感。
- **8 个快速预设**：小圆角、标准卡片、大圆角、胶囊 / Pill、正圆、标签页 Tab、水滴 Blob、重置，一键套用常见圆角方案。
- **三种复制方式**：「复制 CSS」给出 `border-radius` 简写，「复制四角 CSS」给出四个角的完整声明，「复制 HTML+CSS」连示例结构一起带走。
## 参数说明
| 参数 | 说明 | 默认值 / 取值范围 |
| --- | --- | --- |
| 统一圆角 | 勾选后四个角使用同一数值，取消勾选进入四角独立调节 | 默认勾选 |
| 单位 | 圆角数值的单位 | `px`（默认，0–1000）或 `%`（0–100） |
| 圆角大小 | 统一模式下的圆角数值，可拖滑杆或在数字框中输入 | 默认 16 |
| 四角水平半径 | 四角模式下每个角的横向圆角半径（左上 / 右上 / 右下 / 左下） | 默认 16，范围同单位 |
| 四角垂直半径 | 四角模式下每个角的纵向圆角半径，与水平半径不同即为椭圆角 | 默认 16，范围同单位 |
| 方块色 / 背景色 | 预览区中方块与背景的颜色，仅影响预览观感，不写入输出代码 | 默认蓝色方块 `#3b82f6`、浅灰背景 `#f3f4f6` |
| 预览形状 | 预览块的形状 | 正方形（默认）/ 长方形 / 圆形 |
| 快速预设 | 一键套用常用圆角组合 | 小圆角 8px、标准卡片 16px、大圆角 32px、胶囊 999px、正圆 50%、标签页 Tab、水滴 Blob、重置 |
## 使用步骤
1. **打开工具页面**：左侧是参数调节区，右侧上方是实时预览区、下方是生成的 CSS 代码，无需登录即可使用。
2. **选择调节模式**：保持「统一圆角」勾选，用一个滑杆同时控制四个角，适合卡片、按钮等常规场景；取消勾选后会出现左上、右上、右下、左下四个角的调节卡片，每个角可单独设置水平半径和垂直半径，适合标签页、水滴形等不规则效果。
3. **选择单位并调节数值**：在「单位」下拉中选择 `px` 或 `%`，然后拖动滑杆或在右侧数字框中直接输入数值。`px` 适合固定尺寸设计稿，`%` 适合响应式布局和正圆。
4. **套用快速预设（可选）**：不想从零调时，直接点「快速预设」里的方案——「标准卡片」是常用的 16px 卡片圆角，「胶囊 / Pill」用 999px 做出按钮胶囊形，「正圆」自动切换为 50%，「水滴 Blob」则给出一组百分比椭圆角。
5. **调整预览环境（可选）**：用「方块色」「背景色」取色器换成自己项目的配色，并切换「正方形 / 长方形 / 圆形」预览形状，确认圆角在真实场景中的观感。
6. **复制代码使用**：确认效果后，在代码区上方选择一种复制方式——「复制 CSS」得到 `.box { border-radius: 16px; }` 这样的简写；「复制四角 CSS」得到 `border-top-left-radius` 等四条完整声明；「复制 HTML+CSS」连 `` 示例结构一起复制，粘贴到项目里即可生效。
## 使用技巧
- **做胶囊按钮用 999px**：当一个很大的固定像素值超过元素高度的一半时，圆角会自动呈现为完全圆润的胶囊形，比计算具体数值更省事，预设「胶囊 / Pill」就是这个原理。
- **做正圆用 50% 而非像素值**：`border-radius: 50%` 对任意尺寸的元素都是正圆，配合「圆形」预览形状可以直观验证，预设「正圆」会自动帮你切到百分比单位。
- **水平半径 ≠ 垂直半径就是椭圆角**：四角独立模式下把某个角的水平半径和垂直半径设成不同值，生成的 CSS 会采用 `水平半径 / 垂直半径` 的斜杠语法，可以做出自然柔和的椭圆角和有机水滴形。
- **标签页效果只圆上两个角**：预设「标签页 Tab」只给左上、右上设 12px，底部两角为 0，是做 Tab 导航的常用写法。
- **追求兼容性用「复制四角 CSS」**：四条完整声明语义最清晰，也方便后续只覆盖其中一个角；团队协作时推荐这种写法。
- **配色对比要提前验证**：换上方块色和背景色后如果圆角边缘「看不出」，说明实际项目中对比度也不够，应趁早调整设计。
## 常见问题
**Q1：`px` 和 `%` 两种单位怎么选？**
`px` 是固定像素，无论元素多大圆角都不变，适合按设计稿还原；`%` 是相对元素尺寸的百分比，元素变大圆角也跟着变大，适合响应式布局，做正圆时必须用 50%。
**Q2：为什么「胶囊 / Pill」预设是 999px 这么大的值？**
CSS 中圆角半径超过元素高度一半时会自动收敛成半圆形端头，所以只要给一个足够大的值（如 999px），任何高度的元素都会变成胶囊形，无需精确计算。
**Q3：四角模式下的「水平半径」和「垂直半径」是什么意思？**
圆角其实是一段椭圆弧：水平半径决定弧在水平方向的弯曲程度，垂直半径决定垂直方向。两者相等就是普通圆弧，不等则是椭圆角，生成的 CSS 会写成 `60% 30% 50% 40% / 40% 60% 30% 50%` 这样的斜杠语法。
**Q4：三种复制方式有什么区别？**
「复制 CSS」只含 `border-radius` 简写，最简洁；「复制四角 CSS」展开为四个角的独立声明，便于单独修改某个角；「复制 HTML+CSS」额外附带 `` 结构，适合快速 demo。三者数值完全一致，按需选择即可。
**Q5：调的方块色、背景色会出现在复制的代码里吗？**
不会。这两个取色器只改变预览区的观感，帮助你验证圆角在不同配色下的效果，输出的 CSS 只包含 `border-radius` 相关声明。