圆角生成
可视化调节八个半径（四个角各有水平与垂直），生成 border-radius 简写、斜杠语法与四条 longhand 声明，支持像素/百分比切换和药丸、圆形、水滴、叶子预设。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
预设
八个半径
每个角各有水平与垂直半径，两者不同时会用斜杠语法输出
输出选项
实时预览
预览使用当前单位下的真实圆角值
生成的代码
.card {
border-radius: 16px;
}这个工具能做什么
- 做卡片、按钮、头像的圆角时先在这里调好，再复制 border-radius 声明，省得反复改数值刷新页面。
- 做药丸按钮或圆形头像：套用药丸（999px）或圆形（50%）预设，两个数值的差别一眼就能看清。
- 需要不规则形状时，把某个角的水平半径和垂直半径调成不同值，工具会生成 水平四值 / 垂直四值 的斜杠语法。
- 只改其中一个角的时候打开 longhand 输出，直接拿 border-top-left-radius 这类声明去覆盖，不用重算整个简写。
示例
输入
单位 px，左上 12px/8px、右上 10px/6px、右下 4px/2px、左下 6px/3px，选择器 .card
输出
.card {
border-radius: 12px 10px 4px 6px / 8px 6px 2px 3px;
}四个角的水平垂直半径完全相同时只输出一侧，例如全部 16px 会压缩成 border-radius: 16px;。
常见问题
border-radius 的斜杠语法是什么意思？
斜杠前是四个角的水平半径（左上、右上、右下、左下），斜杠后是垂直半径。border-radius: 50% / 10% 就表示水平方向取一半宽度、垂直方向取 10% 高度，这是做椭圆和异形圆角的关键写法。
px 和百分比有什么区别？
px 是固定半径，元素变大圆角不变；百分比按元素自身的宽高计算（水平半径按宽度、垂直半径按高度），所以同一套百分比在宽高比不同的元素上效果不同。要做正圆就写 50% 并保证元素是正方形。
为什么简写的值有时是 1 个、有时是 4 个？
这是 CSS 简写的收缩规则：四个角完全相同写 1 个值；左上等于右下、右上等于左下写 2 个；只有右上等于左下写 3 个；否则写 4 个。工具会自动做这个压缩，输出和手写等价但更短。
圆角会影响点击区域和溢出内容吗？
会。border-radius 会裁剪背景和边框，但不会裁剪子元素，除非加上 overflow: hidden。子元素溢出圆角时会被方角截断，这是最常见的「圆角失效」原因。
百分比半径过大时会怎样？
规范允许百分比最大 100%，超过会被浏览器按比例缩小（相邻角的半径之和超过边长时会等比例缩减），结果和你写的数值对不上。要精确控制就改用 px。
关键词：border-radiuscss radiusrounded cornerspill shapeslash syntax圆角生成CSS 圆角斜杠语法药丸按钮前端样式