圆角生成器
拖动滑块分别调四个角的圆角,开椭圆模式还能捏出流动的异形(“blob”)形状,CSS 代码实时生成,随时复制。
所有角
右上
右下
左下
每个圆角形状都在你的浏览器里绘制,这里设置的内容不会上传到 BroBroGo。
常见问题
四个角和 px、% 是怎么对应的?
四个滑块按顺时针分别对应左上、右上、右下、左下四个角。用 px 时圆角是固定的像素大小;用 % 时则相对于元素本身——横向百分比按宽度算,纵向百分比按高度算,所以正方形设成 50% 就变成了圆。
椭圆模式是做什么的?
关闭时每个角都是单一半径的四分之一圆。打开后,每个角可以分别设横向和纵向两个半径,这正是做出柔和、流动的异形(“blob”)形状的关键。工具会自动写成带斜杠的两组数值,四个角都变回正圆时又会收回最短写法。
怎么做出正圆或胶囊形状?
把四个角联动,切到 %,设成 50%——正方形就变成正圆。想做胶囊按钮就改用 px,把某个角拖到超过按钮高度的一半,不管多宽两端都会是完整的圆。点一下「正圆」预设就能得到第一种效果的起点。