⬭CSS 圆角生成器

怎么用圆角生成器

1. 拖动预览四周的八个控制点：上下两条边的控制点调水平半径，左右两条边的控制点调垂直半径。
2. 在 % 和 px 之间切换；取消勾选“四值写法”就能写出完整的 水平 / 垂直 语法。
3. 试试预设或随机 blob，然后复制 CSS。

常见问题

border-radius 里的斜杠是什么意思？

斜杠前面是每个角的水平半径，后面是垂直半径。所以 border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% 会让每个角变成椭圆弧而不是圆弧，这正是做 blob 形状的原理。

该用 % 还是 px？

百分比会跟着元素大小缩放，50% 永远是完美的椭圆；像素则保持固定弧度，卡片和按钮一般用像素。写一个很大的像素值（例如 999px）就能得到胶囊形。

为什么圆形变成了椭圆？

border-radius: 50% 是按盒子比例计算的。元素不是正方形时结果自然是椭圆，把宽高设成一样，或者加上 aspect-ratio: 1 即可。