CSS 圆角生成器
这款 CSS 圆角生成器让你可视化地设计圆角，几秒钟就能复制干净的 CSS。在实时形状上拖动手柄、输入精确数值或点选一个预设，border-radius 代码都会随你的操作即时更新。
给按钮、卡片和输入框做日常圆角时用简单模式；想做不规则水滴、蛋形、水滴形等自由形状时，切换到高级模式，启用完整的 8 值斜杠语法。无论是想要精确数值的开发者，还是探索装饰性形状的设计师，它都同样好用。
使用方法
设置每个角
在简单模式中，用滑块或数字输入框设置左上角、右上角、右下角和左下角。开启全部锁定可让所有角一起变化，解锁后则可单独塑造每个角。
在预览上拖动
直接在实时形状上抓取手柄，凭手感圆化各角。拖动时预览、手柄和 CSS 输出都会即时更新。
进入高级或选用预设
切换到高级模式，为每个角分别设置水平和垂直半径，使用 H1 H2 H3 H4 / V1 V2 V3 V4 语法；或打开预设套用现成形状。点击随机形状立即得到一个水滴形。
复制 CSS
生成的 border-radius 声明始终显示在预览下方。点击复制 CSS 即可放入剪贴板，直接粘贴到你的样式表中。
功能特性
简单与高级模式
简单模式提供 4 个圆角控制，用于标准圆化；高级模式则解锁完整的 8 值语法，每个角的水平和垂直半径可独立设置。
可视化拖动手柄
手柄直接位于形状上——简单模式在四角有 4 个，高级模式沿边缘有 8 个并带辅助参考线。
像素与百分比单位
随时在 px 与 % 之间切换。当前数值会自动换算，让形状保持一致。
全部锁定圆角
锁定后一个数值同时应用到全部四个角，解锁后可独立微调每个角。
12 种内置预设
一键套用圆角、胶囊、圆形、叶形、票券、水滴、蛋形、水滴形 1–3、徽章或气泡——每个都以小形状预览呈现。
随机生成形状
随机形状会切换到高级模式，每次点击都生成一个全新的不规则水滴形。
可调预览
将预览的宽高在 100px 至 500px 之间调整，看看圆角在不同元素尺寸下的效果。
颜色选择器
设置形状和背景颜色，让你在实际使用的配色下预览圆角效果。
嵌套圆角计算器
输入外圆角和内边距，即可算出子元素应有的正确内圆角，并附带嵌套效果的可视化预览。
即时 CSS 与复制
CSS 实时更新，需要时使用带斜杠语法的简写形式，一键复制到剪贴板。
常见问题
CSS 怎么设置圆角？
使用 border-radius 属性，例如 border-radius: 12px;。用这款生成器，你可以可视化地设置每个角并复制精确的声明，无需猜测数值或记住各角顺序。
border-radius 的四个值是什么意思？
当你给出四个值时，它们从左上角开始按顺时针应用：左上角、右上角、右下角、左下角。简单模式的控件正是用这几个角标注的，所以你改的数值与看到的角一一对应。
怎么用 border-radius 做出正圆形？
在正方形元素上把每个角都设为 50%。内置的圆形预设已为你做好这一步——只要保持预览的宽高相等，就是正圆而不是椭圆。
只圆化上方两个角怎么做？
关闭全部锁定，然后只调高左上角和右上角，把下方两个角保持为 0。输出会变成类似 border-radius: 16px 16px 0 0;，非常适合做标签页和卡片头部。
border-radius 里的斜杠语法是什么？
完整语法是 border-radius: H1 H2 H3 H4 / V1 V2 V3 V4。斜杠前的值设置每个角的水平半径，斜杠后的值设置垂直半径。当两者不同时，角会变成椭圆形，这正是不规则水滴形状的做法。切换到高级模式即可编辑这八个值。
border-radius 该用 px 还是 %？
按钮、图标等固定尺寸、需要精确圆角的元素用 px；响应式元素和不规则形状用 %——正方形上 50% 即为圆形。切换单位时，单位切换会自动换算你当前的数值。
嵌套圆角计算器有什么用？
当一个圆角子元素位于带内边距的圆角父级中时，内圆角应该更小才好看。公式是 inner = max(0, outer − padding)。输入外圆角和内边距，计算器就会给出正确的内圆角并附可视化预览——例如 16px 的父级配 8px 内边距，得到 8px 的内圆角。
生成的 CSS 能用在任何框架里吗？
可以。输出是符合标准的纯 CSS，在所有现代浏览器中都能用。无需任何改动，即可粘贴到样式表、内联样式或 CSS-in-JS 方案中。
还没有评论，快来发表第一条！