CSS圆角在线生成工具 - 自由调节border-radius

什么是CSS 圆角生成？

border-radius 是 CSS 中设置元素圆角的属性，可以统一设置四个角，也可以按左上、右上、右下、左下的顺序分别设置。圆角是网页设计中塑造柔和感与层级感的重要手段。

Yeo工具箱的 CSS 圆角生成器支持四角独立调节和一键统一，实时预览矩形、椭圆和异形圆角效果，并生成可直接复制的 border-radius 代码。

如何使用Yeo工具箱的CSS 圆角生成？

1. 拖动四个角的圆角半径滑块
2. 可勾选「四角统一」同步调节
3. 预览区实时显示圆角效果
4. 一键复制生成的 border-radius CSS 代码

常见使用场景

• 场景1：按钮与卡片的圆角统一设计
• 场景2：头像、Logo 圆形裁剪
• 场景3：标签、胶囊按钮的特殊圆角
• 场景4：异形卡片四角差异化设计

使用小贴士

• 头像和图标用 50% 即可得到正圆，不受元素尺寸影响
• 胶囊按钮的圆角建议设置为高度的一半

常见问题

Q1: border-radius 的四个值怎么对应？

按顺时针依次是左上、右上、右下、左下。例如 border-radius: 10px 20px 30px 40px，四个角互不相同；只写一个值时四角相同。

Q2: 能做出圆形吗？

把元素的 border-radius 设为宽高的一半（或 50%）即可得到圆形；图片、头像、按钮都常用这种方式。

Q3: 斜杠写法是什么意思？

border-radius: 50% / 25% 表示水平半径和垂直半径不同，可以做出椭圆、胶囊、花瓣等不规则圆角形状。

更新日志

• 2026-08-04 更新：Yeo工具箱 CSS 圆角生成工具正式上线

⚠ 声明：本工具所有数据处理均在您的浏览器本地完成，数据不会被上传到任何服务器。