圆角处理时半径与图片尺寸的适配规则

用短边比例确定圆角半径

图片圆角不应只看宽度，也不应把所有图片都套用 20px 或 24px。更稳定的做法是先取图片宽度与高度中的较小值，再按短边比例计算半径，避免小图的圆角占据过多边角。

短边指图片宽度和高度中较小的那个数。圆角计算公式是 r = 短边 × 比例，其中 r 是圆角半径。常规图片可从短边的 5%～15%开始；内容卡片、头像或界面风格明确的组件，可以扩展到20%。

• 5%～8%：适合照片、文章缩略图和小尺寸图片，边角变化较克制。
• 8%～12%：适合普通内容卡片，圆角清晰但不容易切掉主体。
• 15%～20%：适合视觉风格较强的卡片、头像和插画，需要确认主体没有被裁切。

从几何上看，圆角半径通常不应超过短边的50%。当半径接近这一数值时，相邻圆角会相切，矩形会逐渐接近胶囊形；如果宽高相同，则会接近圆形。50%是形状边界，不是普通照片和卡片的通用推荐值。

小图尤其容易受到固定半径影响。短边只有 32px、48px 或 64px 时，固定使用 20px、24px，会迅速占据四个角，缩小可见主体面积；人物、商品边缘和图标笔画都可能显得比例失真。

不同图片尺寸下的计算与取值

实际工具中可以给比例增加上下限，避免图片过小或过大时出现极端结果。例如：

r = clamp(短边 × 0.08, 4px, 32px)

这表示先按短边的 8%计算，再把结果限制在 4px 到 32px 之间。下限能避免大比例换算后圆角几乎不可见，上限则能防止大图出现过重的圆角。

• 320×180px 图片：短边是 180px，按 8%计算得到 14.4px，可取 14px 或 16px。
• 64×64px 图标：短边是 64px，按 8%计算得到约 5px，通常可取 5px。
• 48×48px 缩略图：按 8%计算为 3.84px，若工具设置最小值为 4px，则使用 4px。
• 1200×600px 横幅：短边是 600px，按 8%计算为 48px；若上限设为 32px，最终半径为 32px。

固定半径也有适用场景。比如一个界面中的卡片始终以相同 CSS 尺寸显示，统一使用 24px 可以保持组件风格一致；但图片尺寸从 64px 缩略图变化到 1200px 横幅时，按短边比例计算通常更稳定。

导出尺寸和显示尺寸不是一回事。图片可能以 1200×675px 导出，却在网页中以 320×180px 显示；如果圆角在 CSS 中生成，最终边缘取决于浏览器缩放和渲染。如果圆角已经在绘图工具或导出阶段写入图片，则半径会随图片缩放而一起缩放。

按图片类型调整视觉圆角策略

• 照片与横幅：建议使用短边的 5%～12%。人物、商品和文字通常靠近边缘，半径过大容易切掉主体。
• 头像与正方形图标：可使用 10%～20%。如果需要圆形头像，应明确使用 50%半径或等价的圆形裁剪规则，而不是把普通卡片圆角误认为圆形。
• 小尺寸缩略图：优先考虑 4px～8px 的绝对值，并在 32px、48px、64px 等尺寸下分别检查边角占比。
• 透明 PNG、贴纸和插画：要区分“裁剪容器圆角”和“图片内容本身的圆角”。前者只改变外部裁剪区域，后者可能已经包含透明边缘或圆角像素。

“圆角越大越好看”并不成立。半径超过短边的 20%后，视觉变化会更明显；对于小图，固定半径往往比比例半径更容易造成形变。判断标准应是主体是否被切掉、四角是否抢夺注意力，以及同一界面中的图片是否保持一致。

在图片圆角工具中验证并导出

使用“图片圆角”处理图片时，工具至少应支持读取尺寸、设置比例、输入像素值，并提供 PNG 或 WebP 导出选项。实际操作可以按以下顺序完成：

1. 上传图片，读取原始宽度和高度。
2. 取宽度与高度中的较小值，作为短边。
3. 输入圆角比例或直接输入像素值。没有明确风格时，可从 8%开始。
4. 预览图片在实际显示尺寸下的效果，检查人物、商品、文字和图标笔画是否被裁掉。
5. 分别以 1×、2×、3×显示倍率，或以不同 CSS 尺寸查看边缘，确认没有锯齿、白边和明显的抗锯齿色带。
6. 导出文件并重新打开复查，确认透明区域和圆角边缘符合预期。

可以为工具设置三组预设：

• 小图：短边的 5%～8%，或 4px～8px。
• 普通卡片：短边的 8%～12%。
• 强圆角风格：短边的 15%～20%，需要额外检查主体裁切。

透明圆角应优先导出为 PNG，或使用支持透明通道的 WebP。JPEG 不支持透明背景，若把圆角区域直接导出为 JPEG，四角通常会填充为某种背景色。还要确认圆角究竟是在 CSS 中生成，还是已经写入导出文件：CSS 的 border-radius通常只是显示裁剪，并不会永久改写图片内容；导出文件是否保留圆角，取决于工具的处理方式和文件格式。

实际选择可以从公式开始：r = 短边 × 比例。普通场景先用 5%～15%，风格化组件再考虑 20%；只有明确需要圆形或胶囊形时，才接近短边的 50%。