CSS 圆角生成器
调整全部八个 border-radius 圆角数值（含椭圆的水平和垂直半径），实时预览方框并复制简写 CSS。
正在加载工具…
CSS 圆角生成器 — 独立调整方框的每个圆角——左上、右上、右下、左下——并为每个角分别设置水平和垂直半径，以绘制真正的椭圆曲线，实时预览随之更新，同时为你生成简写的 border-radius CSS。一切都在浏览器本地运行，任何数值都不会离开你的设备。复制结果即可直接粘贴到样式表中。
CSS 圆角生成器 是什么？
CSS 圆角生成器是一款免费的 CSS border-radius 属性可视化编辑器，专为前端开发者和设计师打造。用范围滑块和数字输入框以像素设置每个角的水平和垂直半径，选择单位，并开启椭圆模式以获得椭圆角的斜线语法。实时预览框会即时显示圆角形状，并为你生成紧凑的简写声明供复制。从分段控件中选择「圆角」「胶囊」「圆形」或有机的「水滴」等预设可快速起步，然后微调任意角。可用于设计柔和卡片、胶囊按钮、正圆、超椭圆以及水滴状装饰形状，无需死记各角顺序。
如何使用 CSS 圆角生成器
- 从分段控件中选择一个预设（圆角、胶囊、圆形或水滴）来载入起始形状。
- 拖动每个角的范围滑块或输入数字，设置该角的水平半径。
- 开启「椭圆」以为每个角显示第二个垂直半径，用斜线语法生成椭圆角。
- 在设置中选择单位（px 或 %）；百分比会随方框大小缩放半径。
- 查看实时预览更新，然后将生成的 border-radius 简写复制到样式表中。
示例
柔和卡片圆角
输入
四角均为 16，椭圆关闭
输出
border-radius: 16px;
胶囊按钮
输入
预设 胶囊，四角均为 9999
输出
border-radius: 9999px;
椭圆混合角
输入
左上 40/20, 右上 10, 右下 40/20, 左下 10, 椭圆开启
输出
border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;
常见问题
- 四个角的顺序是怎样的？
- 简写从左上角开始顺时针列出各角：左上、右上、右下、左下。本工具始终按此顺序输出全部四个值，因此结果清晰明确，事后手动微调也很方便。
- 椭圆模式有什么作用？
- border-radius 可为每个角接受用斜线分隔的水平半径和垂直半径，以绘制椭圆角而非圆形角。开启「椭圆」可为每个角设置第二个垂直半径；输出此时使用「水平 / 垂直」的斜线语法。
- 应该用 px 还是百分比？
- 像素给出固定的圆角尺寸，与方框无关。百分比相对于方框的宽高，因此每个角设为 50% 会把正方形变成正圆，且圆角会随元素尺寸缩放。可在设置中切换单位。
- 如何制作正圆或胶囊？
- 选择「圆形」预设（每个角 50%）可把正方形变成圆形，或选择「胶囊」预设（一个很大的像素半径），使短边变成完整的半圆。你也可以从预设起步再微调单个角。
- 我的数据会被上传到任何地方吗？
- 不会。生成器完全在你的浏览器中通过 JavaScript 运行——你的半径数值绝不会发送到服务器，因此既能保护隐私，页面加载后甚至还能离线使用。