要点
- 01三种模式 — 统一、单角和椭圆 — 涵盖从简单圆角按钮到有机 blob 形状的所有需求。
- 02支持 px、% 和 rem 单位，各自具有不同的缩放行为。
- 03椭圆模式为每个圆角公开水平和垂直半径，适用于 CSS 的完整 border-radius 语法。
- 04实时预览使用真实 CSS 属性，所以看到的形状正是浏览器渲染的形状。
从简单圆角到有机 Blob 形状
四个圆角的 border-radius 值很容易从记忆中输入 — border-radius: 8px。但一旦需要每个圆角不同的半径，或想要有机形状的 CSS 椭圆语法，简写就会迅速变成密码。完整形式是 top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — 八个值按特定顺序排列。
Handytool 的圆角生成器让你为任何模式下的每个圆角拖动滑块，并看到形状实时更新。在 px、% 和 rem 之间切换而无需重新计算，完成后复制正确的简写或完整形式的 CSS 声明。
如何设计圆角
- 01
选择模式
统一模式将一个半径应用于所有四个圆角。单角模式独立控制每个圆角。椭圆模式为每个圆角添加单独的水平和垂直半径。
- 02
选择单位
选择 px 表示绝对大小，% 表示随元素尺寸缩放的值，rem 表示与根字体大小关联的大小。
- 03
拖动滑块
调整圆角值，看预览元素实时更新。对于单角模式，独立拖动每个圆角的滑块。
- 04
预览形状
预览框应用实际的 CSS border-radius 属性，所以看到的形状就是浏览器渲染的形状。
- 05
复制 CSS
单击复制获取 border-radius 声明并粘贴到样式表中。
常见形状及各模式的使用时机
- 01药丸形按钮：统一 % 模式，设置为 50% — 无论按钮宽度如何都是完整药丸形
- 02卡片微妙圆角：统一 px 模式，8–16px — 最常见的 UI 模式
- 03不对称标签或标记：单角模式，一侧锐角，另一侧圆角
- 04头像圆形：统一 % 模式，50% — 随图像容器缩放
- 05有机 blob 形状：椭圆模式，每个圆角的 X/Y 值不同
即时预览，无上传
圆角生成器完全是客户端。滑块、模式切换和单位更改都会立即更新预览，无需服务器往返。没有账户，也没有速率限制。
该工具在所有现代浏览器中都能工作。border-radius 属性 — 包括椭圆 X/Y 语法 — 在 Safari、Firefox、Edge 和 Chrome 的所有常青版本中都受支持，所以输出可以安全使用而无需供应商前缀或回退。
圆角生成器常见问题
border-radius 中 px 和 % 的区别是什么?
像素圆角是绝对的 — 16px 总是 16px。百分比圆角相对于元素的尺寸，所以 50% 在正方形框上创建完美圆形，在矩形上创建椭圆。
何时应使用椭圆模式?
当你想要一个圆角在一个轴上突出更多 — 用于水平药丸形、叶片形或有机 blob。CSS 在 border-radius 简写中将此表示为 X-radii / Y-radii。
为什么我的百分比圆角在非正方形框上看起来错误?
水平百分比相对于元素的宽度；垂直百分比相对于其高度。在宽且矮的元素上，圆角会拉伸成椭圆弧而不是圆弧。
输出在每个浏览器中都能工作吗?
是的 — border-radius 包括椭圆语法在所有现代浏览器中都受支持：Safari、Firefox、Edge 和 Chrome 的所有常青版本。无需供应商前缀。
如何用 border-radius 创建完美圆形?
在正方形元素上的百分比模式下将所有圆角设置为 50%。元素也需要相等的宽度和高度 — 如果大小是动态的，使用 aspect-ratio: 1 / 1。