⬜ 圆角生成器

关于圆角生成器

这个圆角生成器完全在你的浏览器中运行。独立调整四个角各自的水平和垂直半径，或启用椭圆模式创建更复杂的形状。将生成的 CSS 代码直接复制到你的项目中。

border-radius 工作原理

• 简单圆角 —— 椭圆模式关闭时，每个角使用单个值。CSS 使用 4 个值：左上、右上、右下、左下。
• 椭圆圆角 —— 启用后，每个角有独立的 X 和 Y 半径，创建椭圆形曲线。CSS 使用 4/4 格式，用斜杠分隔。
• 逐角控制 —— 全部 8 个滑块让你在两个方向上为每个角设置不同的半径。

如何使用生成器

1. 调整 8 个滑块设置每个角的 X 和 Y 半径。
2. 勾选椭圆圆角以在 CSS 输出中启用独立的 X/Y 控制。
3. 预览框会实时更新。
4. 点击复制 CSS复制生成的代码。

常见问题

简单和椭圆有什么区别？ 简单模式每个角使用一个值（圆弧）。椭圆模式每个角使用独立的 X 和 Y 值，允许椭圆形曲线。

可以创建圆形吗？ 可以——将所有值设为 50%（或以 px 为单位设为盒子大小的一半）即可得到完美的圆形或椭圆。

border-radius 到处都支持吗？ 是的，border-radius 在包括移动端在内的所有现代浏览器中都受支持。