分类: 开发工具
CSS 圆角生成器
逐个角调圆角，实时预览
每个角一个滑块，随手复制 border-radius 声明。打开椭圆圆角即可使用生成有机形状的斜杠写法。
输出
border-radius: 12px;
预览是真正套用了生成值的元素，所以看到的就是浏览器画出来的样子。
本页的所有处理都在浏览器中完成，不会上传任何内容。
这个工具能做什么
border-radius 看着只是一个数字，直到需要三个角各不相同才会发现简写容易记错：四个值从左上开始顺时针排列，而斜杠写法里，斜杠前是每个角的水平半径，斜杠后是垂直半径。正是第二种写法能画出那些柔和、不对称、看起来有机而不像圆角方块的轮廓。这里每个角都有滑块，预览是真正套用了该值的元素而不是一张图片，输出也像人写的一样做了合并：四角相同时只输出一个值，而不是四个。
使用方法
- 选择单位；需要各角不同就取消联动。
- 拖动每个角，直到预览满意。
- 需要有机形状就打开椭圆圆角，然后复制声明。
隐私说明
本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。
常见问题
- 值里的斜杠是什么意思？
- 斜杠前是每个角的水平半径，斜杠后是垂直半径。两侧取值不同就得到椭圆弧，而不是四分之一圆。
- 该用百分比还是像素？
- 像素在任何尺寸下都保持同样的弧度，按钮和卡片通常需要这种效果。百分比会跟着元素缩放，正方形用 50% 就变成圆形。
- 为什么输出不足四个值？
- CSS 会合并重复的角，本工具也一样：四角相同是一个值，对角相同是两个值。结果完全一致，只是写得更短。