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


## 工具简介

**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 代码，无需登录即可使用。

![CSS 圆角生成器主界面：左侧为参数调节区，含统一圆角勾选框、单位下拉、圆角大小滑杆、方块色/背景色取色器、预览形状按钮](article/202607/1783965758653_3473.png)

2. **选择调节模式**：保持「统一圆角」勾选，用一个滑杆同时控制四个角，适合卡片、按钮等常规场景；取消勾选后会出现左上、右上、右下、左下四个角的调节卡片，每个角可单独设置水平半径和垂直半径，适合标签页、水滴形等不规则效果。

3. **选择单位并调节数值**：在「单位」下拉中选择 `px` 或 `%`，然后拖动滑杆或在右侧数字框中直接输入数值。`px` 适合固定尺寸设计稿，`%` 适合响应式布局和正圆。

4. **套用快速预设（可选）**：不想从零调时，直接点「快速预设」里的方案——「标准卡片」是常用的 16px 卡片圆角，「胶囊 / Pill」用 999px 做出按钮胶囊形，「正圆」自动切换为 50%，「水滴 Blob」则给出一组百分比椭圆角。

5. **调整预览环境（可选）**：用「方块色」「背景色」取色器换成自己项目的配色，并切换「正方形 / 长方形 / 圆形」预览形状，确认圆角在真实场景中的观感。

6. **复制代码使用**：确认效果后，在代码区上方选择一种复制方式——「复制 CSS」得到 `.box { border-radius: 16px; }` 这样的简写；「复制四角 CSS」得到 `border-top-left-radius` 等四条完整声明；「复制 HTML+CSS」连 `<div class="box"></div>` 示例结构一起复制，粘贴到项目里即可生效。

## 使用技巧

- **做胶囊按钮用 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」额外附带 `<div class="box"></div>` 结构，适合快速 demo。三者数值完全一致，按需选择即可。

**Q5：调的方块色、背景色会出现在复制的代码里吗？**
不会。这两个取色器只改变预览区的观感，帮助你验证圆角在不同配色下的效果，输出的 CSS 只包含 `border-radius` 相关声明。


免费在线 CSS 圆角生成器，可视化调节 border-radius：支持统一圆角、四角独立水平/垂直半径、px 与 % 单位，内置胶囊、正圆、水滴等预设，实时预览，一键复制 CSS、四角 CSS 或 HTML+CSS 代码。

CSS 圆角生成器使用教程：可视化调节圆角，一键复制 border-radius 代码