圆角生成器
四角独立或统一调圆角，实时预览并复制 border-radius 语句
圆角生成器是做什么的
CSS 的 border-radius 四个值到底哪个对应哪个角，不常用的人每次都要想一下；想做一个左上大右下小的异形卡片，手写更容易写反。这个工具把四个角做成独立滑条，也可以勾「四角统一」一根滑条搞定，右边色块实时跟着变，调好直接复制完整语句。
单位支持 px 和 %，做正圆、胶囊这类响应式形状用百分比更省事。还准备了胶囊、正圆、叶子、波浪角四个快捷形状，点一下立即套用。做按钮、头像、卡片、气泡样式的时候，把它开着随手拖两下，比自己试快得多。所有运算都在本地完成。
核心功能
- 四角独立滑条或统一调节
- px / % 两种单位切换
- 完整 border-radius 语句一键复制
- 胶囊/正圆/叶子等快捷形状
- 渐变色块实时预览
圆角生成器怎么用
四角独立或统一调圆角，实时预览并复制 border-radius 语句
- 选择四角统一或独立调节
- 拖滑条或点快捷形状
- 按需切换单位 px 或 %
- 复制 border-radius 语句使用
适合这些场景
- 按钮与头像圆角
- 异形卡片设计
- 聊天气泡造型
常见问题
四个值分别对应哪几个角？
按顺时针从左上开始：左上、右上、右下、左下。工具里每根滑条都标了名字，复制出来的语句也是按这个顺序写的，粘贴后不需要再调整顺序。
什么时候用 % 什么时候用 px？
元素尺寸固定就用 px，直观可控；元素大小会变（比如自适应卡片、正圆头像）用百分比更稳，50% 永远是正圆或椭圆，999px 则直接变成胶囊。
圆形头像为什么被压成椭圆？
50% 是相对元素自身宽高的，宽高不一致时就是椭圆。先给元素固定相同的宽高，或者直接用 999px 胶囊再配合 object-fit 裁剪图片即可。