CSS 圆角生成器
四角滑杆与花瓣 blob 模式调节圆角，实时预览并复制 CSS
使用说明
- 默认四角模式，拖动四个滑杆分别控制左上、右上、右下与左下。
- 切到花瓣 blob 模式，八个滑杆分别控制每个角的水平与垂直半径。
- 五个预设覆盖圆角卡片、圆形、水滴、叶片与有机形状，选后再微调更快。
- 预览方块实时反映当前参数，形状不满意继续拖动即可。
- 点复制拿到标准 border-radius 代码，粘到样式里就能用。
语法与行为
八值语法是什么？
相邻圆角重叠会怎样？
像素与百分比有什么区别？
圆角能裁剪图片吗？
常见问题
为什么预览是 160 像素的方块？
参数会保存吗？
border-radius 会影响布局吗？
生成代码支持所有浏览器吗？
界面截图
使用步骤
- 拖四角滑杆
默认四角模式，四个滑杆分别控制左上、右上、右下与左下，拖动即时反映到预览方块上。
- 切到 blob 模式
blob 模式把每个角拆成水平与垂直两个半径，共八个滑杆，对应八值语法，能做出花瓣与有机形状。
- 用预设起步
圆角卡片、圆形、水滴、叶片与 blob 五个预设覆盖常见形状，选一个接近的再微调更快。
- 复制 CSS
输出框按当前模式自动切换格式生成标准 border-radius 代码，点复制粘到样式里即可。
工具详细介绍
border-radius 的四值写法按左上、右上、右下、左下顺时针排列，分别对应四个角。八值写法用斜杠把水平半径与垂直半径分成两组，两组可以完全不同，每个角因此呈椭圆弧，花瓣、水滴与有机形状都由此而来。浏览器对重叠有保护：相邻两角半径之和超过边长时，会按同一比例缩小全部半径，形状不会破，但可能与预期有出入。圆角区域还会裁剪背景与溢出内容，配合 overflow hidden 是头像与封面裁形的标准做法。
工具提供两种模式：四角模式四个滑杆，blob 模式八个滑杆，预览为 160 像素见方的方块，输出代码随模式自动切换格式。五个预设覆盖常见形状，点选后仍可继续微调，当前命中的预设会保持高亮。模式与全部参数都保存在本机浏览器里，下次打开接着上次的形状继续调整，清除站点数据即可删除。生成的是像素值，套到其他尺寸的元素上按比例换算即可。圆形不受尺寸限制，直接写 50% 就行，胶囊形同理。
原理与背景
规范层面，每组半径定义的是一段四分之一椭圆，水平半径沿元素宽度、垂直半径沿高度量取。八个值全部相同且等于边长一半时就是正圆。相邻半径和超过边长时，浏览器用一个统一系数缩小所有半径，保证形状闭合，这也是某些数值下看起来没变化的原因。圆角区域会裁剪背景与溢出内容，overflow hidden 正是依赖这一行为裁剪图片。border-radius 还支持过渡动画，配合延时可以做圆角形变的微交互。
设计层面，圆角半径如今是设计系统的基础变量，常见以 4、8、12、16 的倍数构成体系。大圆角传达亲和与柔和，小圆角传达利落与专业，选择本身就是语气。水滴与叶片这类形状用不对称半径实现，blob 用八值语法调出不规则的有机形，作为装饰比插画轻量。注意文本较多的容器不要用过大圆角，边角挤压会影响行宽与可读性，正文卡片以中小圆角为宜。
典型使用场景
- 头像与封面
社区与资讯类页面大量使用圆角头像与封面图，矩形统一 8 到 16 像素即可，圆形头像直接拉满。容器加 overflow hidden 配合圆角，图片自动裁出形状，不需要额外处理素材。
- 按钮与卡片
按钮圆角一般在 6 到 10 像素，卡片在 12 到 20 像素，整站统一两三档就够用。主按钮可以用胶囊形把半径拉满，与次级按钮拉开差异，视觉权重立刻分开，表单里的确认与取消也照此区分。
- 有机装饰形状
落地页的装饰色块用 blob 模式调出不对称的有机形状，比插画轻量，也比规则圆角生动。把八个半径数值存下来复用，几个色块错位叠放就是一组背景装饰。
使用技巧
- 圆角大小跟着设计规范走，统一用 4 的倍数，整站风格不容易乱。
- 非方形元素想要正圆，直接写 50%，不要用固定像素硬凑。
- 大圆角容器记得配 overflow hidden，否则头像与图片会压在直角上。
注意事项
- 圆角被内容溢出
圆角只裁剪背景与溢出内容，容器没有 overflow hidden 时，图片会直接压在直角上。头像与封面最容易踩坑。给容器加 hidden 或让图片自身继承圆角，形状才会完整，打印样式同样要检查。
- 非方形套圆形值
在长方形上把四角拉满像素会得到胶囊而不是圆形，左右两端仍是半圆相接。想要正圆，要么元素本身是方形，要么直接写 50%，宽高各自取一半自动成圆，不需要手算。
- 八值方向记反
八值语法斜杠前是四个水平半径，斜杠后是四个垂直半径，两组都从左上角起顺时针排列。方向记反会调不出想要的形状，怎么拖都不对劲。动手前先确认两组的顺序，再对照预览逐角校准。