CSS圆角生成器
可视化调节四个角的圆角半径，实时预览并生成 border-radius 代码，支持 px / % 单位与圆形快捷模式。
CSS圆角生成器使用指南
📌 简介
CSS圆角生成器是一款面向前端开发者的可视化在线工具，用于快速调节元素四个角的圆角半径并生成对应的 border-radius 代码。无需手写数值反复调试，拖动滑块即可实时预览效果，适合在网页、卡片、按钮、头像等 UI 组件设计中快速确定圆角样式。工具纯前端运行，不上传任何数据。
📖 border-radius 属性原理
border-radius 是 CSS3 提供的圆角属性，语法为 border-radius: 半径;。它可接收 1 到 4 个值，分别控制左上、右上、右下、左下四个角：一个值表示四角相同；两个值表示左上=右下、右上=左下；三个值表示左上、右上=左下、右下；四个值则按左上、右上、右下、左下顺时针排列。该属性支持长度单位（px、em、rem 等）和百分比。使用百分比时，水平半径基于元素宽度、垂直半径基于元素高度，因此 border-radius: 50% 能把正方形变成圆形、把矩形变成椭圆。当相邻两角半径之和超过边长时，浏览器会自动按比例缩放，避免重叠。此外还能用斜杠语法 border-radius: 水平半径 / 垂直半径 生成独立控制的椭圆角。
💼 常见应用场景
- 按钮与表单：设置 4px–8px 的小圆角，让按钮更柔和现代。
- 卡片与弹窗：12px–20px 的大圆角常用于 Material Design 或 iOS 风格界面。
- 头像与图标：使用 50% 百分比把正方形图片变成圆形头像。
- 标签与徽章：设置较大的单角半径或全圆角，制作胶囊形标签。
- 装饰图形：只对其中一两个角设置大半径，可生成水滴形、扇形等特殊形状。
⚙️ 使用步骤
- 在右侧四个角的滑块或数字输入框中调整半径，左上、右上、右下、左下可独立设置。
- 需要四角一致时，勾选“四角同步调节”，拖动任意一个滑块即可整体变化。
- 在 px 与 % 之间切换单位，百分比适合做圆形或椭圆效果。
- 点击“圆形”一键把四个角设为 50%，点击“重置”恢复默认。
- 左侧预览框实时显示圆角效果，右侧文本框自动生成简写后的 border-radius 代码。
- 点击“复制 CSS”把代码复制到剪贴板，粘贴到样式表中即可。
⚠️ 注意事项
- 代码输出会智能简写：四角相同时输出一个值，对角相同时输出两个值，只有需要时才展开为四个值。
- 百分比圆角受元素实际宽高影响，同样的 50% 在正方形上是圆、在长方形上是椭圆。
- 当相邻角半径之和超过元素边长时，浏览器会按比例缩减，实际效果可能与输入数值不完全一致。
- border-radius 不会裁剪内部内容，若要让子元素或背景图跟随圆角裁剪，需额外设置 overflow: hidden。
- 本工具输出的是标准 border-radius 属性，兼容所有现代浏览器；如需兼容非常老的浏览器，需自行添加厂商前缀。
❓ 常见问题 (FAQ)
Q: 为什么四个角设置为 50% 后变成了椭圆而不是圆？
A: 百分比半径分别基于元素宽度和高度计算，元素不是正方形时自然变成椭圆。要得到正圆，请确保元素宽高相等。
Q: 生成的代码为什么有时只有一两个值？
A: border-radius 支持简写：四角相同可写一个值，对角相同可写两个值，工具会自动选择最短的等价写法，方便阅读与压缩。
Q: 可以只给一个角设置圆角吗？
A: 可以。把其他三个角设为 0，只调整目标角的数值，生成代码中该角就会单独生效，等价于使用 border-top-left-radius 等单角属性。
Q: 圆角内容被裁剪了怎么办？
A: border-radius 只影响边框外观，内部子元素仍可能溢出圆角。给容器加上 overflow: hidden 即可让内容跟随圆角裁剪。