圆角与形状生成器
以 px 或 % 调整四个角的水平和垂直半径，并预览形状。复制或保存生成的 border-radius CSS。预览宽度、高度和颜色不会包含在 CSS 中。
功能介绍
从预设调整圆角
从圆角、胶囊和叶形等 8 种预设中选择并调整半径。选择预设会替换半径和单位。
为四个角设置不同圆角
关闭相同半径设置后，可分别输入左上、右上、右下和左下角的水平及垂直半径。
检查并获取 CSS
检查形状后生成 CSS。可在简写形式和各角的单独声明之间切换，然后复制或保存为 CSS 文件。
使用方法
选择预设和单位
直接输入半径，或选择预设开始调整。更改单位不会换算数字。
比较圆角和形状
输入一个值即可让所有角使用相同半径。若要分别设置各个角的值，请取消勾选该选项并调整水平和垂直值。
按需检查尺寸
可以在预览设置中更改宽度、高度和预览颜色。这些设置不会包含在输出 CSS 中。
生成 CSS，然后复制或保存
点击“生成 CSS”并选择所需格式。更改半径、单位或尺寸后，请重新生成。
适用场景
设置卡片和按钮的圆角
想要为页面组件创建 CSS，将四个角设为相同圆角，或只圆化上方角时。
创建不对称圆角背景
想要按角分别更改水平和垂直圆角，创建类似叶片或有机形状的轮廓时。
半径、单位和显示尺寸之间的关系
水平和垂直是同一角的两个方向
水平半径控制水平方向的圆角，垂直半径控制垂直方向的圆角。任一值为 0 时，该角不会变圆。从左上角开始按顺时针方向指定四个角。
% 分别以宽度和高度为基准
水平 % 值相对于元素宽度，垂直 % 值相对于元素高度。即使数值相同，正方形、纵向矩形和横向矩形的显示效果也不同。px 直接指定长度。
过大的半径会按相同比例缩小
如果相邻半径之和超过边长，全部 8 个显示半径都会按相同比例缩小。输入值和生成的 CSS 不变。生成后可在详情中查看用于预览的半径。
圆角可以表达的轮廓范围
border-radius 会将角变为椭圆曲线，无法创建凹陷或任意多边形。圆角方形预设使用椭圆角近似该形状，并非精确复现其数学曲线。
常见问题
可以为每个角设置不同的圆角吗？
可以。取消勾选“所有角使用相同半径”，即可分别输入每个角的水平和垂直半径。重新勾选后，所有角都会设为左上角的水平半径。
切换单位时数字会换算吗？
不会。数值会保留，只更改单位。从 px 切换为 % 后，如果数值仍大于 100，请重新输入 0–100 范围内的值。
预览中的尺寸和颜色会包含在 CSS 中吗？
不会。输出仅包含 border-radius 声明。请在使用它的页面或组件中设置宽度、高度和背景颜色。
为什么显示的圆角比我输入的半径小？
浏览器会按相同比例缩小显示的半径，以避免圆角曲线重叠。你可以在“用于显示的半径”下查看缩小系数以及各角的 px 数值。
输入和结果
- 半径
- 使用相同单位指定全部 8 个值：0–100% 或 0–9999px。也接受小数。
- 预览
- 预览宽度和高度为 1–400px 的整数。放不下的宽度可在画框内水平滚动查看。
- 输出
- border-radius 简写，或四个角各自的声明。可复制或保存为 border-radius.css。
- 不包含
- 宽度、高度、背景颜色，以及图像或 SVG 导出。