工具简介
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、重置 |
使用步骤
- 打开工具页面：左侧是参数调节区，右侧上方是实时预览区、下方是生成的 CSS 代码，无需登录即可使用。
选择调节模式：保持「统一圆角」勾选，用一个滑杆同时控制四个角，适合卡片、按钮等常规场景；取消勾选后会出现左上、右上、右下、左下四个角的调节卡片，每个角可单独设置水平半径和垂直半径，适合标签页、水滴形等不规则效果。
选择单位并调节数值：在「单位」下拉中选择
px或%，然后拖动滑杆或在右侧数字框中直接输入数值。px适合固定尺寸设计稿，%适合响应式布局和正圆。套用快速预设（可选）：不想从零调时，直接点「快速预设」里的方案——「标准卡片」是常用的 16px 卡片圆角，「胶囊 / Pill」用 999px 做出按钮胶囊形，「正圆」自动切换为 50%，「水滴 Blob」则给出一组百分比椭圆角。
调整预览环境（可选）：用「方块色」「背景色」取色器换成自己项目的配色，并切换「正方形 / 长方形 / 圆形」预览形状，确认圆角在真实场景中的观感。
复制代码使用：确认效果后，在代码区上方选择一种复制方式——「复制 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 相关声明。