圆角生成器

使用方法

1. 选择模式 — 简单模式为每个角编辑一个半径；椭圆模式增加独立的垂直半径，可生成斜杠语法。
2. 选择单位 — 随时在 px 和 % 之间切换，滑块数值保持不变。
3. 拖动圆角滑块 — 在 0 到 100 之间调整每个角，或直接输入精确数值。勾选”联动四个角”可同步调整全部四角。
4. 调整椭圆半径 — 在椭圆模式下单独设置每个角的垂直半径，做出椭圆、超椭圆或有机斑点形状。
5. 复制 CSS — 输出会自动把相同的角折叠为最精简的合法简写，并且仅在真正需要时才生成斜杠语法。

功能特点

• 两种编辑模式 — 简单四角编辑，外加完整的 8 值椭圆模式（a b c d / e f g h）。
• 联动或独立调整 — 一个开关即可让四角同步联动，或解锁逐角独立控制。
• px 与 % 单位 — 固定像素半径或相对元素尺寸的百分比，随时可切换。
• 实时预览 — 每一处修改都会立即渲染在演示方块上，与浏览器实际绘制效果一致。
• 极简输出 — 四角相同折叠为单个值，部分相同使用二值或三值简写，斜杠仅在真正的椭圆半径下出现。
• 100% 客户端运行 — 所有计算都在浏览器中完成，数据不会离开你的设备。

使用场景

• 超椭圆卡片： 给卡片设置较大的水平半径和稍小的垂直半径，做出类似 iOS 风格的现代圆角矩形。
• 有机斑点形状： 为每个角设置不同的椭圆半径，快速原型化用于头图和头像的 blob 形状。
• 圆形与胶囊： 切换到 %，联动四角并设为 50%，无需计算即可得到正圆（方形元素）或胶囊形（宽元素）。
• 学习简写规则： 切换联动开关，观察生成的 CSS 在一、二、三、四值之间的折叠规律。

相关工具

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