⬜
Border Radius生成器
可视化生成CSS border-radius
border-radius: 16px;Border Radius生成器提供CSS border-radius的可视化编辑功能，可将矩形元素变换为圆形、椭圆、胶囊形、有机blob形状等多种形态。支持单独调节每个圆角或联动统一调整，内置常用预设可快速应用。适用于按钮、卡片、头像图片等各类UI元素的圆角设计。
📖 使用方法
- 分别调整每个角的圆角
- 连接角可同时调整
- 使用预设快速应用
- 复制CSS代码使用
✨ 主要功能
- ✓每个角单独调整
- ✓连接角选项
- ✓提供多种预设
- ✓实时预览
- ✓自动生成CSS代码
💡 使用场景
- •UI设计师：为设计系统组件（按钮、卡片、输入框）定义统一的border-radius值。
- •前端开发者：快速将用户头像设为圆形、标签元素设为胶囊形。
- •网页制作者：实时对比不同圆角值组合，找到最佳的UI呈现效果。
- •CSS艺术家：利用不对称border-radius创建独特的有机blob造型。
- •设计初学者：直观理解border-radius简写属性（4值）与完整属性（含斜杠的8值）的区别。
🎯 使用技巧
- ▸输入50%即可将正方形变为圆形，长方形变为椭圆形。
- ▸胶囊形按钮的border-radius设置为元素高度的一半即可（如高度40px则设为20px）。
- ▸为每个角输入不同的大值（如30% 70% 70% 30% / 30% 30% 70% 70%）可创建有机的blob造型。
- ▸卡片UI通常使用8-16px的border-radius即可呈现现代感。
- ▸搭配overflow: hidden使用可以让子元素也沿着圆角边缘裁剪。
❓ 常见问题
Q. 如何制作完美的圆形？
A. 输入50%即可将正方形元素变为圆形。
Q. 如何创建blob形状？
A. 为每个角输入不同的值即可创建有机的blob形状。请参考预设示例。
Q. border-radius中的斜杠(/)是什么意思？
A. 斜杠前的值定义水平半径，后面的值定义垂直半径。例如border-radius: 50% 50% / 60% 40%会创建水平和垂直圆度不同的椭圆形。
Q. border-radius和clip-path有什么区别？
A. border-radius专门用于圆角处理，而clip-path可以创建三角形、多边形等更复杂的形状。对于圆角需求，border-radius在性能和易用性方面更优。
Q. 可以给图片添加border-radius吗？
A. 可以，直接在img标签上添加border-radius，或在容器div上设置border-radius配合overflow: hidden，即可将图片裁剪为圆形或圆角矩形。