CSS 圆角生成器

Preview
0px
0px
0px
0px

什么是CSS 圆角生成器?

免费在线 CSS 圆角生成器,可视化调节四个圆角的半径。支持不规则圆角(椭圆)和百分比设置,实时预览效果,一键复制 CSS 代码。适合按钮、卡片、头像等圆角设计。

使用场景

  • 按钮圆角
  • 卡片设计
  • 头像裁剪
  • 不规则形状

如何使用?

  1. 1拖动滑块调节各角半径
  2. 2实时预览圆角效果
  3. 3复制生成的 CSS 代码

功能特点

  • 四角独立调节
  • 椭圆支持
  • 实时预览
  • CSS 导出

常见问题

百分比圆角是什么意思?

百分比圆角基于元素的宽和高计算,50% 可以创建完美的圆形(方形元素时)。

可以创建不规则形状吗?

可以,通过设置不同角的半径可以创建各种有机形状。

能创建完美的圆形吗?

能。在正方形元素上设置 border-radius: 50%。矩形元素使用 9999px。

什么是椭圆圆角?

使用斜杠语法如 border-radius: 50%/100px,创建水平和垂直半径不同的椭圆圆角。

每个角可以不同吗?

可以。使用 border-radius: 左上 右上 右下 左下 独立设置每个角。适合创建有机形状。

border-radius 性能好吗?

好。border-radius 是 GPU 加速的,不触发布局重排,非常高效。