圆角图片生成器

这款圆角工具的不同之处：每个角都可以有自己的半径，半径可用像素或较短边的百分比表示，角本身可以是普通圆角弧、超椭圆平滑曲线、直线切角或向内的内凹。工具还会打印对应的 CSS border-radius 规则，因此同一形状既可导出为文件，也可在代码中复现。

为什么要把图片的角做成圆角？

如何为图片添加圆角

1. 加载图片。将文件拖到放置区，或选择选择图片。JPG、PNG、WebP、GIF、BMP、AVIF 和 SVG 都可以，只要浏览器能解码它们。
2. 设置半径。拖动预览上圆形的圆角手柄，移动圆角半径滑块，或输入精确数值并在 px 与 % 之间切换单位。
3. 选择圆角样式。圆角、超椭圆、切角或内凹。关闭联动所有角后，可为每个角设置自己的数值，屏幕上的排列方式与它们控制的角一一对应。
4. 如需内边距、背景或边框，再添加。内边距会在图片周围扩大画布，背景填充画布，边框环沿圆角轮廓走，而不是沿原来的矩形。
5. 下载。透明圆角请保持 PNG，然后点击下载图片。面板会显示导出尺寸和文件大小，CSS 框会显示等效的样式表规则。

像素半径还是百分比半径

像素半径是绝对值：无论图片宽 400 还是 4000 像素，32 px 都是 32 px，所以同一数值在小缩略图上很夸张，在大照片上几乎看不出来。百分比半径按图片的较短边计算，因此会随图片缩放，在每次导出上看起来都一样。50% 是实用上限，正方形会得到圆形，矩形会得到胶囊形。

四种圆角样式

• 圆角 — 四分之一圆，与浏览器绘制 border-radius 的几何相同。结果可预期，也是唯一能与 CSS 一一对应的样式。
• 超椭圆 — 超椭圆式圆角。曲线从各边更远处开始，流入直边时没有正圆那种曲率突变，这也是 iOS 和 Android 应用图标规范使用该形状的原因。
• 切角 — 用一条斜直线切掉角落。比曲线更锐利、更偏技术感，小尺寸时仍然清晰。
• 内凹 — 弧线向内弯曲，挖出凹口。相对两侧各做一个内凹角，会立刻被看成票券或标签。

选择输出格式

因为 JPG 没有 alpha 通道，导出时会用所选背景色填充切掉的圆角，而不是留空。这往往正是你想要的效果 — 白底页面上的白色圆角照片 — 但这不是透明，事后也无法还原。

主要功能

• 天生注重隐私：文件通过浏览器 FileReader API 读取，并在本地画布上绘制。绝不会上传。
• 拖动圆角编辑：在预览上沿对角线拉动手柄，半径会跟随手指或光标变化。
• 分角控制：可以只圆化上面两个角，或只内凹一侧，其余保持直角。
• 预览背景：在透明棋盘格、白色、深色和彩色渐变之间切换，下载前检查 alpha 边缘。
• 内边距、背景填充和边框环都沿同一圆角轮廓走。
• 输出缩放：按原始分辨率导出，或在同一次处理中缩小到 75%、50% 或 25%。
• 可复制的 CSS：生成的 border-radius 规则可在不适合用文件时，在样式表中复现同一形状。
• 抗锯齿边缘：圆角作为裁剪路径绘制，曲线保持平滑，而不是出现阶梯状锯齿。

用图片文件还是 CSS？

如果圆角图要放进幻灯片、PDF、电子邮件签名、商品列表，或任何不会运行你样式表的工具，你需要带真实透明度的真实文件 — 请导出 PNG。如果它要放到你能控制的网页上，CSS 规则更轻、任意尺寸都保持锐利，以后也更容易改；这时复制片段即可。两者并不互斥：许多团队对外使用 PNG，站点上使用 CSS。

疑难排查

• 圆角看起来锯齿：源图可能已经很小。请在可用的最大分辨率上加圆角，然后再缩小，而不是先放大再加圆角。
• 深色背景上出现一圈浅色光晕：图片里已经烤进了白色蒙版。用匹配的颜色加一两像素内边距，或略微增大半径，把光晕切掉。
• 下载后打开是白色方块：格式是 JPG，或背景未设为透明。请将输出格式改为 PNG。
• 很大的照片感觉卡顿：每次移动滑块时，画布都会重绘全分辨率图片。松开滑块等浏览器片刻，或降低输出缩放。
• 动态 GIF 失去动画：画布只导出一帧。只有第一帧会被加圆角并保存。

常见问题

我的图片会上传到服务器吗？

不会。文件由浏览器通过 FileReader API 读取，并在您自己的设备上绘制到 HTML canvas。不会发送到 miniwebtool，因此私密截图、客户稿件和个人照片都不会离开您的电脑。页面本身仍需要联网才能加载。

为什么我的圆角看起来是白色或黑色，而不是透明的？

只有 PNG 和 WebP 能存储透明度。如果导出 JPG，该格式没有 alpha 通道，切掉的圆角会改用背景色填充。请在输出格式列表中选择 PNG，并将背景设为透明。如果圆角看起来仍不对，请检查您粘贴到的应用或网站是否支持 alpha，因为有些编辑器会把 PNG 透明度压到白色底上。

如何做出完全圆形的图片？

将半径单位切换为百分比，并把半径设为 50%。正方形图片会得到正圆。矩形图片会得到胶囊形或跑道形，因为百分比半径是按较短边计算的。使用“圆形”预设可一键裁成正方形并加圆角。

圆角、超椭圆、切角和内凹有什么区别？

圆角是普通的四分之一圆，与 CSS border-radius 画出的形状相同。超椭圆把曲线沿各边延伸得更远，衔接平滑连续，这是 iOS 和 Android 应用图标使用的外观。切角用一条斜直线切掉角落。内凹向内弯曲而不是向外，在每个角挖出凹口，适合票券、优惠券和徽章。

像素半径是否与网站上的 CSS border-radius 一致？

半径按图片自身的像素应用，因此只有在图片按原始尺寸显示时才与 CSS 一致。一张 1200 像素宽的导出图放在 600 像素宽的栏中会被缩小一半，所以 48 像素半径在屏幕上看起来像 24 像素。使用百分比单位可得到与尺寸无关的结果，或复制本工具生成的 CSS 片段，其中已给出缩放后的等效值。

能否保持画质和原始分辨率？

可以。除非您更改输出缩放或添加内边距，导出都会保持原始像素尺寸；PNG 是无损的，因此不会被再次压缩。只有圆角像素会从完全不透明变为透明。WebP 和 JPG 是有损的，在更看重文件大小而不是精确复制源像素时再使用它们。