圆角生成器

边框圆角生成器用于手工构建 CSS border-radius 值——拖动圆角滑块、在圆形与椭圆之间切换，并复制一条已经折叠为最短合法形式的声明。它适合希望不另开标签页编辑 CSS、就能按浏览器实际绘制效果预览形状的前端开发者和设计师。

两种模式的区别

简单模式为每个角编辑一个半径：左上、右上、右下、左下。这足以应付圆角卡片、按钮和头像，这些元素的每个角都是四分之一圆。

椭圆模式为每个角增加第二个独立的垂直半径。一个角不再是四分之一圆，而是四分之一椭圆，这就是做出类超椭圆卡片、蛋形和有机斑块的方式。椭圆输出使用斜杠语法，四个水平半径在前、四个垂直半径在后：border-radius: 40px 40px 40px 40px / 60px 60px 60px 60px。

一个「联动四个角」复选框把所有角绑在一起。开启联动时，移动一个滑块会带动其余几个；关掉它就能单独塑造某个角。在椭圆模式下，这个复选框同样会驱动垂直半径。

简写折叠是如何工作的

CSS 允许在半径值重复时省略它们。生成器按浏览器使用的同一顺序应用折叠：

1. 如果左下等于右上，删掉左下。
2. 如果还剩三个值且右下等于左上，删掉右下。
3. 如果还剩两个值且右上等于左上，删掉右上。

这套映射值得记住。一个值设置全部四角。两个值先设置左上/右下，再设置右上/左下。三个值依次设置左上，然后右上/左下，最后右下。

半径（左上、右上、右下、左下）	生成的值
16, 16, 16, 16	16px
20, 40, 20, 40	20px 40px
10, 30, 10, 30	10px 30px
10, 30, 50, 30	10px 30px 50px

第三行是个有用的陷阱：10px 30px 50px 表示左上 10、右上 30、右下 50，而左下是 30，并不是四个独立的角。

实操示例

像素单位的圆角卡片。 联动四个角并拖到 16px。输出是 border-radius: 16px;，预览在每个角上显示柔和的 16 像素圆角，声明也短到 CSS 允许的极限。

超椭圆风格的主视觉面板。 切到椭圆模式，把所有水平半径设为 40px，再把垂直半径设为 60px。由于垂直组是统一的，不会进一步折叠，输出变成 border-radius: 40px / 60px;。角的纵向比横向更长，看起来是一个现代的圆角矩形，而不是普通卡片。

只强调两个角。 取消联动，让左上和右下保持 10px，把右上和左下设为 30px。输出折叠为 border-radius: 10px 30px;——形状与写全四个值一样，只是更短。

百分比、像素与取值选择

像素给圆角一个固定的物理尺寸，不随元素缩放而改变：无论卡片是 200px 还是 600px 宽，12px 的半径始终是 12px。

百分比让圆角随元素缩放，但方式与许多人的预期不同。水平百分比相对于元素宽度，垂直百分比相对于元素高度。这就是为什么正方形上的 50% 变成正圆，而矩形上的 50% 变成椭圆。百分比适合头像和圆形徽章——元素可能被缩放，但应始终保持圆形。对于胶囊形按钮，等于按钮高度一半的固定半径——或者一个刻意超大的值如 9999px——才是可靠的选择。

几条经验法则能让生成的值不显得别扭：

• 卡片和面板的半径在 8px 到 16px 之间，读起来是有意为之的圆润而不至于过于花哨。4px 的半径在高 DPI 屏幕上几乎看不出来。
• 按钮通常以接近高度一半的半径最好看（40px 高的按钮配 20px 半径）成为胶囊形，或者用与卡片相同的半径获得更方的外观。
• 同一表单里的输入框和按钮应共用同一个半径，让形状感觉是一个体系而非两套。
• 椭圆角很抢眼，所以每个屏幕用一次即可——主视觉面板或头像——不要用在每个表面上。

复制声明之前还有一个结构细节值得知道：生成的值是单个 border-radius 属性，而不是四个独立的角属性。如果你的设计系统已在别处设置了 border-radius，你的新值会覆盖它，所以要把规则放在你希望它生效的位置，并让预览确认结果。

阅读生成的声明

输出面板会把值包在一条小规则里，方便直接粘贴：

.box {
  border-radius: 10px 30px;
}

选择器和花括号只是便利，不属于值本身。如果你在编辑一条已有规则，只复制 border-radius: 10px 30px;。如果是从零开始做原型，整段代码块就是合法 CSS。同样的值会出现在实时预览方块上，所以预览是把不寻常的椭圆图形写进样式表之前最快的检查方式。

常见错误

• 以为 50% 能得到胶囊形。 在任何非正方形的盒子上它都会产生椭圆。请改用等于高度一半的像素值。
• 混用单位。 border-radius: 10px 50%; 是无效 CSS。整条声明请统一用 px 或 %。
• 忘了斜杠。 椭圆半径需要 a b c d / e f g h；没有斜杠，第二组会被解释成更多的角值。
• 以为过大的值会出问题。 超过较小边长一半的值会被浏览器按比例缩小，所以视觉结果比数字看上去要小。
• 只复制值。 输出框包含完整的 .box { ... } 代码块；要粘进已有规则时，请只复制声明部分。

相关工具

• CSS 盒阴影生成器 — 实时预览设计多层盒阴影。
• CSS Flexbox 生成器 — 以可视化方式设计 Flexbox 布局并复制 CSS。
• CSS 渐变生成器 — 为布局构建自定义 CSS 渐变。