⬡ 一个工具箱,
完成所有设计任务

圆角生成器

可视化圆角编辑器,实时预览。支持每个角独立控制,复制CSS代码。

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

⬡ 圆角生成器

圆角指南

圆角控制元素角的圆度。不同的圆角值创造不同的设计感觉。

使用滑块独立调整每个角。预览实时更新。

专业提示

常见问题

Q: CSS格式:border-radius: 左上 右上 右下 左下;
CSS格式:border-radius: 左上 右上 右下 左下;
Q: 对于不同的元素我应该使用什么边界半径值?
对于不同的元素我应该使用什么边界半径值?卡片通常使用 8-16px,按钮使用 4-8px,模态框使用 12-20px,头像使用 50% 的圆圈。对较大的元素使用较大的值以保持比例一致性。
Q: 如何创建药丸形状的按钮?
如何创建药丸形状的按钮?将边框半径设置为非常大的值,例如 999px。浏览器会将其限制在元素高度的一半,自动创建药丸形状,无论按钮大小如何。
Q: 我可以对每个角应用不同的半径吗?
我可以对每个角应用不同的半径吗?是的,四个单独的角控件可让您为左上角、右上角、右下角和左下角设置唯一的值。这对于定向设计元素很有用。