图像圆角

圆角半径

操作系统、应用商店及用户界面设计系统均青睐圆角设计,如iOS图标、Material卡片以及现代的Tailwind组件。上传任意图片后,该工具会按设定的半径对四个角进行圆角处理,并导出为带透明边角的PNG文件;还可以为每个角单独设置不同的半径,实现票根或对话气泡等造型。

如何将图像的四角变为圆角

  1. 1

    上传图片

    JPG 、PNG 或 WebP 格式。

  2. 2

    选择半径

    以像素数或较短边的百分比表示。

  3. 3

    可选:每个角的半径不同

    只对顶部两角做圆角(卡片),或采用不对称造型(票根)。

  4. 4

    选择背景

    透明(PNG格式);若另存为 JPG 则为纯色。

  5. 5

    导出

    PNG格式保留圆角效果; JPG 会自动调整为所选颜色。

常见 UI 形状的半径选择

半径预设

形状 半径
精致用户界面卡片 4–8 像素
材料设计卡片 4像素(在M3中为8像素)
iOS 应用图标 边长的 22.37%(即“squircle”)
macOS 应用图标 边长的 18.75%
Instagram 故事气泡 12–16 像素
圆形头像 短边长度的 50%(完全圆形)
票根 非对称,仅对一两个角做圆角
聊天气泡尾部 一个角较小,其余角较大

squircle 难题

iOS图标并非简单的圆角矩形,它们采用“超椭圆(superellipse)”,在过渡处数学上更为平滑。真正的 squircle 超出了 CSS border-radius 或简单 Alpha 蒙版所能渲染的范围;该工具用高阶圆角矩形进行近似,在常规图标尺寸下几乎难以分辨。

透明度行为

  • “PNG格式输出”为默认设置,圆角部分会转换为透明像素,非常适合用于应用图标、用户界面卡片以及需要将图像嵌入各种背景场景的情况。
  • JPG 输出无法呈现透明效果。圆角会填充您选定的颜色,从而让照片呈现出画框效果。

每个角落的半径不同

聊天气泡造型:三个角均圆润,圆角半径为12像素;另留一个角的圆角半径为0像素(即“尾部”连接处)。票根形状:两个角锐利,两个角圆润。不对称的圆弧半径能快速暗示该图像与其他物体相连。

抗锯齿

圆角曲线采用4倍超采样技术绘制,因此在常规显示尺寸下呈现清晰锐利的效果;无论是打印还是大幅放大时,其半径仍保持明显的平滑质感。

常见问题

苹果采用一种 squircle,其角曲率约为图标边长的22.37%。在1024×1024像素的画布上,这相当于约229像素的有效角半径;不过具体计算公式与普通圆角矩形略有不同。

是的。无论图像宽高比如何,半径均按每个角进行计算。在极端宽高比(极宽或极高)情况下,将半径设置为短边长度的50%可生成胶囊形状。

不,JPG 不支持透明效果。可选择将文件导出为PNG格式以保留圆角透明度,或为 JPG 指定背景色,此时四个角将填充该颜色。

是的。该工具仅添加Alpha蒙版,不会调整图像大小。如需同时实现圆角处理和缩放效果,请先应用缩放工具。

相关工具

此工具还提供其他语言版本