边框做三件事：把图片从白色页面中分离出来、模拟实体照片的质感，以及让任何照片在不裁剪的前提下塞进固定的宽高比。

用百分比而不是像素定宽度

20 像素的边框在 400 像素的缩略图上笨重，在 4000 像素的照片上却看不见。要按比例思考：

  • 发丝线（宽度的 0.3–0.5%）——1–3 像素的细线，只为把照片与白底分开。用浅灰，不要用黑。
  • 相片感（2–4%）——经典的白色留边，让照片看起来像一张实体相片。
  • 拍立得（左右和上方 4%，下方 12–15%）——正是下方那道厚边让它读起来像一次成像。下方留白，或放一行短标题。

有意识地选颜色

  • 白色是默认值，在浅色页面上会隐形，让照片浮起来。
  • 黑色增加戏剧性，适合边缘偏暗的照片，也能藏住边缘曝光不佳的问题。
  • 从照片里取的颜色最像设计。用吸管从画面内部取一个低饱和的色调，而不是随便套一个品牌色。
  • 避免渐变、投影和多层叠加的边框——它们会让图片瞬间显得过时。

用边框解决宽高比问题

这是被低估的用法。平台要方图，你的照片是 3:2，裁剪就会切到人头。这时不要裁，改为填充：把照片放在一张方形画布上，让边框补齐剩余空间。内容一点不丢，版面也整齐。

具体做法是加不对称的留白——上下（或左右）补足到目标比例，另一对边留同样的小边距。填充色要贴近平台背景色，这样留白才像有意为之的负空间。

操作顺序

  1. 先裁剪出你要的构图。
  2. 再加边框/留白，因为它会改变最终尺寸。
  3. 最后缩放到目标像素，边框才会与画面等比缩放。
  4. 压缩放在最后——大片平坦的边框几乎不占体积。

网页场景有个提醒：烙进图片文件里的边框无法适配深色模式。如果边框只是你自己网站上的装饰，就用 CSS 实现，让它随主题变化；只有当图片要发往你控制不了的平台时，才把边框烧进文件。