工具介绍
CSS圆角生成器可直观调节圆角大小，实时预览圆角效果，并生成正确的border-radius代码，支持统一圆角和每个角单独设置水平/垂直半径，满足各种圆角设计需求。
使用方法
- 如果需要所有圆角大小一致，勾选「统一圆角」，拖动滑块或输入数值即可，所有角都会使用相同的圆角大小。
- 如果需要自定义每个角的圆角，取消勾选「统一圆角」，分别调节每个角的水平和垂直半径即可。
- 滑动过程中上方会实时预览效果，下方会自动生成对应CSS代码，直接复制使用即可。
语法原理
CSS border-radius 的语法规则：
| 语法形式 | 说明 |
|---|---|
| border-radius: 16px; | 四个角都使用16px的圆角，水平垂直半径都是16px |
| border-radius: 16px / 8px; | 所有角水平半径16px，垂直半径8px |
| border-radius: 10px 20px 30px 40px; | 四个角按左上、右上、右下、左下顺序分别设置水平/垂直相同半径 |
| border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; | 斜杠前是四个角的水平半径，斜杠后是四个角的垂直半径，顺序同样为左上、右上、右下、左下 |
本工具会根据你设置的数值自动生成最简洁的简写代码，同时提供完整展开形式方便查看。
注意事项
- 单位默认使用px，如果需要其他单位，可以手动修改生成的代码。
- 圆角最大设置为100px，更大的圆角可以手动修改代码即可。
- 椭圆圆角（水平垂直半径不同）在所有现代浏览器都支持，兼容IE9及以上版本。