已更新9月 2026
如何使用边界半径生成器
- 调整角 - 一起调整圆角，单独调整形状。
- 观看实时预览 - 无法从数字判断半径的个性。
- 尝试使用斑点模式（不同的水平/垂直半径）来制作有机英雄形状。
- 复制 CSS - 并在整个你的框架中标准化 2-3 个半径值。设计。
边界半径生成器是什么？
边框半径生成器可实现圆角视觉效果：通过实时预览调整每个角的半径并复制 border-radius CSS。统一舍入很简单（border-radius: 8px）；生成器获得了对每个角的控制（8px 24px 8px 24px 模式）和异国情调的斜线语法 - 30% 70% 70% 30% / 30% 30% 70% 70% - 每个角的水平和垂直半径不同，产生装饰现代着陆的有机“斑点”形状
Radius 是一个音调表盘：0 表示技术性，4–8px 表示专业，12–24px 表示友好，9999px 表示丸状，不对称斑点表示俏皮 — 很少有 CSS 属性能够直接设置设计的个性。
关于边界半径生成器
拖动每个角的控件，实时观察形状更新，并复制 CSS - 从卡片的微妙 12px 到完整的八值 blob。
实用模式：整个设计系统中一致的半径（选择 2-3 个值 - 例如 6px 输入、12px 卡片、24px 模态 - 并重复使用它们；随机半径读起来很草率）；药丸按钮（半径≥高度的一半，通常为 9999px）；圆形（方形元素上 50% — 头像配方）；语音气泡和选项卡形状（三个角为圆形，一个角为方形）；和英雄斑点通过斜杠语法，通常在两个半径集之间进行动画处理，以实现柔和的变形背景。
一个几何注释：嵌套的圆形元素在半径相等的情况下看起来是错误的 - 内部元素的半径应该是外部元素的半径减去它们之间的填充（外部 16 像素，8 像素填充 → 内部 8 像素），否则角会明显打斗。
常见问题解答
从左上角开始顺时针：左上、右上、右下、左下。两个值配对对角；一个值对所有四个值均等舍入。
每个角的水平半径/垂直半径： 60% 40% 30% 70% / 50% 60% 40% 50% 为每个角提供椭圆而不是圆形 - 斑点形状语法。
圆形：边框半径：宽度和高度相等的元素上的 50%。药丸：任何半径至少为高度的一半 - 9999px 是惯用语，保证任何尺寸的药丸。
嵌套元素上的相等半径会产生视觉上不匹配的曲线。规则：内半径=外半径-间隙。具有 8px 填充的 16px 卡需要内部有 8px 半径的内容。
选择一个小规模并执行它：例如输入/卡片/模态为 4/8/16px 或 6/12/24px。确切的数字比一致性更重要——混合任意半径看起来很不专业。