图片工具 · 编辑变换

图片边框

实色/阴影/装饰边框

本地处理 · 不上传 免费 · 无需登录 无次数限制 累计 62 次使用
相框 · 宝丽来 · 双线框 · 投影 · 批量 · 本地
拖入 / 点击 / 粘贴图片

支持 JPG · PNG · WebP · GIF · BMP · AVIF · 可多选批量 · 单张 ≤ 50MB
截图直接 CtrlV 粘贴

Framed locally — nothing uploaded
拖入图片后,
在此实时预览相框效果(棋盘格 = 透明区)
真实合成:边框由 Canvas 逐层绘制(投影 → 外框 → 图片 → 描边 / 双线 / 署名),导出即所见。PNG / WebP 边距区可保真透明,JPEG 用边框色填充。全程本地,原图不离开本机,关闭即清空。
就绪 · 拖入或粘贴图片开始
第一节

关于本工具

About

一张产品图、一张证件照,加个边框就能从“随手拍”变成“可用素材”。这个工具让用户给图片套上实色、阴影或装饰边框,调整边距和圆角,几秒内得到可以直接用于电商详情页、简历或社交封面的输出。所有处理在浏览器本地完成,图片不上传服务器——敏感证件、未公开设计稿都可以放心使用。

使用场景

证件照换底色

周一上午要交白底一寸照,翻出以前的蓝底电子版,用手机修图软件抠图边缘全是锯齿。把照片拖进工具,选「实色」模式,取色器点一下原图白色区域,色值自动锁定为 #FFFFFF,边缘柔化调至 2 像素,导出后发到打印店直接过机,没出现白边晕染。

商品主图加保护框

闲鱼卖二手镜头,买家总问「镜片有没有划痕」。把镜头正面照拖进来,选「阴影」边框,宽度设为 15 像素,透明度 40%,偏移方向右下。阴影压暗了镜片反光,划痕反而显出来,买家看到图直接拍下,省去反复拍照解释的功夫。

手账排版统一风格

打印 50 张旅行照片贴手账,每张尺寸不一、构图杂乱。全部选中批量导入,统一加 8 像素宽「装饰」边框——圆角虚线样式,颜色选暖灰 #D4C5A9。贴完后整本手账的留白和照片边缘齐整,像印刷品,不用再拿剪刀裁白边。

演示文稿截图美化

给客户发方案 PDF,里面插了十几张软件界面截图,白底接白底,分不清边界。每张截图套 3 像素「实色」深蓝边框 #2B579A,再叠加 5 像素「阴影」偏移右下。客户翻页时每张截图像浮在纸面上,方案专业度明显提升。

电商详情页拼接去缝

用手机拍了 4 张长桌的局部图,在 PS 里拼成全景图,但拼接处有 1 像素的亮线。把拼接图导入工具,选「装饰」边框——内阴影样式,宽度 1 像素,颜色取相邻区域的平均色 #E8E0D6。亮线被内阴影覆盖,看起来像自然过渡的接缝。

第二节

使用指南

Getting Started

使用步骤

  1. 1上传图片后,在「边框类型」下拉菜单中选「实色」「阴影」或「装饰」
  2. 2调整「边框宽度」滑块(1-50px),预览区实时显示边框粗细变化
  3. 3点击「边框颜色」色块,从取色器中选择颜色,或直接输入十六进制色值
  4. 4若选「阴影」类型,拖动「模糊半径」和「偏移量」滑块,阴影效果即时更新
  5. 5点击「下载」按钮,浏览器自动保存带边框的 PNG 图片

输入输出示例

输入输出说明
上传一张 800×600 的纯色图片,选择实色边框(颜色 #FF0000,宽度 10px)输出图片:800×620(上下各加 10px 实色红边框)常规:验证实色边框的基础功能,边框宽度正确叠加到图片尺寸上
上传一张 200×200 的图片,选择阴影边框(偏移 5px,模糊 8px,颜色 #000000)输出图片:200×200 原图,右侧和下方各延伸 5px 阴影区域,阴影边缘模糊过渡常规:阴影边框不改变原图尺寸,仅扩展画布容纳阴影效果
上传一张 50×50 的图片,选择装饰边框(花边样式,宽度 20px)输出图片:90×90(边框宽度 20px 导致画布扩大至 90×90,花边图案在四边重复平铺)边界:极小图片,装饰边框宽度大于图片本身,验证边框渲染是否变形或溢出
上传一张 10000×1 的图片,选择实色边框(颜色 #00FF00,宽度 5px)输出图片:10010×11(上下边框 5px,左右边框 5px,但图片高度仅 1px,边框几乎覆盖原图)边界:极端宽高比(10000:1),验证工具对非正方形图片的边框处理是否按比例正确
上传一张 1920×1080 的图片,选择阴影边框(偏移 0px,模糊 0px,颜色 #888888)输出图片:1920×1080 原图,无可见阴影(偏移和模糊均为 0 时阴影不可见)边界:阴影参数全零,验证工具是否输出原图而不报错或添加不可见区域
上传一张 300×300 的图片,选择实色边框(颜色 #FFFFFF,宽度 -5px)输出错误提示:边框宽度必须为正整数易错:用户误输入负数宽度,工具应友好提示而非静默处理或崩溃
上传一张 100×100 的图片,选择装饰边框(样式:虚线,宽度 10px),同时勾选「保留原图尺寸」选项输出图片:100×100(边框绘制在原图边界内,原图内容被边框覆盖 10px 边缘)易错:保留原图尺寸时边框向内绘制,用户可能误以为边框会向外扩展导致内容丢失

常见错误对照

1.透明背景 PNG 加实色边框后边缘出现白边

✗ 错误直接对透明 PNG 添加 2px 实色红色边框
✓ 修复先对图片执行「去杂边」或「裁剪透明像素」操作,再添加边框

PNG 透明区域边缘常残留半透明像素,实色边框会与这些像素混合,产生锯齿状白边。去杂边能消除半透明像素,保证边框干净。

2.阴影边框偏移方向理解反了

✗ 错误设置阴影偏移 X=5、Y=5,期望阴影在右下角
✓ 修复X 正数向右偏移,Y 正数向下偏移,所以 X=5、Y=5 阴影在右下角

阴影偏移遵循 CSS box-shadow 坐标系:X 向右为正,Y 向下为正。若想阴影在左上角,需设 X=-5、Y=-5。

3.装饰边框与图片内容重叠导致遮挡

✗ 错误给一张边角有重要文字的图片添加 30px 宽的装饰花纹边框
✓ 修复先确认装饰边框是「外扩模式」(边框在图片外侧扩展),而非「内嵌模式」

部分工具默认装饰边框在图片内部绘制,会覆盖图片边缘内容。应选择「外扩」模式,让边框在图片外围扩展,不遮挡原图。

4.阴影模糊半径设为 0 却看不到阴影

✗ 错误阴影偏移 X=10、Y=10,模糊半径=0,期望看到清晰阴影
✓ 修复模糊半径至少设为 1px,或使用「硬阴影」模式(偏移+无模糊)

模糊半径=0 时阴影边缘完全锐利,与偏移后的原图边缘重合,视觉上几乎看不到阴影。模糊半径控制阴影边缘过渡,必须 >0 才有可见阴影。

5.边框颜色与图片背景色相近导致边框不可见

✗ 错误给白色背景的图片添加白色实色边框
✓ 修复选择与图片背景色有明显对比的边框颜色,或启用「边框阴影」辅助区分

边框颜色与图片背景色相同或相近时,边框与图片边缘融合,视觉上消失。建议使用互补色或深色边框,或同时添加阴影增强层次。

6.装饰边框的重复平铺导致图案断裂

✗ 错误使用 50px 宽的重复花纹边框,但图片宽度不是 50 的整数倍
✓ 修复选择「自适应缩放」模式,或手动调整边框宽度使图案完整

重复平铺的装饰图案从图片左上角开始排列,若图片尺寸不是图案宽度的整数倍,边缘会出现截断的半个图案,视觉上不完整。

第三节

工作原理

How It Works

核心公式

边框总宽度 = 内边距 + 边框厚度 × 2 + 阴影偏移量(绝对值)

变量说明

  • 内边距内容区到边框内侧的距离(像素)
  • 边框厚度实色或装饰边框的线宽(像素)
  • 阴影偏移量阴影在 X 或 Y 方向的最大位移(像素,取绝对值)

示例

内边距 10px、边框厚度 3px、阴影向右偏移 5px 且向下偏移 5px:边框总宽度 = 10 + 3×2 + 5 = 21px,总高度 = 10 + 3×2 + 5 = 21px。

上传原图选择边框样式实色 / 阴影 / 装饰Canvas 合成像素级渲染实时预览拖拽调整参数调整边框参数宽度 / 颜色 / 模糊下载成品PNG / JPEG不满意可回退
用户操作 本地处理 输出结果
第五节

常见问题

Q & A
上传的图片太大,加边框后会不会卡死或失败?

本工具完全在浏览器本地运行(FE 实现),不依赖服务器处理。处理大图(如 4000×3000 像素以上)时,卡顿主要取决于设备内存和浏览器性能。建议上传前将图片尺寸缩放到 2000 像素以内(长边),或先用工具自带的压缩功能降低分辨率。如果浏览器标签页崩溃,可尝试分次处理或换用 Chrome/Edge 最新版。

为什么加了阴影边框后,图片边缘出现白边或锯齿?

阴影边框的模糊半径会向外扩展,如果原图本身边缘不透明(如 PNG 的透明背景),阴影会正常投射在透明区域上。白边通常出现在 JPEG 图片上,因为 JPEG 压缩后边缘像素颜色过渡不均匀。解决方法:先给图片加一层 1-2 像素的实色内边框(颜色与阴影相近),再叠加阴影边框,可掩盖锯齿。

装饰边框里的花纹图案能自定义颜色吗?

目前装饰边框的图案是预设的矢量样式,不支持单独更改花纹本身的颜色。但可以通过调整边框整体颜色(如深色花纹配浅色背景)来间接改变视觉效果。如果需求是特定颜色或图案,建议先用本工具生成基础边框后,再导入 Photoshop 或 Canva 叠加自定义素材。

加边框后保存的图片和预览时颜色不一样,偏灰或偏亮?

预览时浏览器会对图片做色彩管理(sRGB),但保存时部分浏览器(如旧版 Safari)可能未嵌入 ICC 色彩配置文件,导致在其他软件中显示偏色。解决方法:保存时选择 PNG 格式(比 JPEG 更稳定保留颜色信息),并在保存前确认浏览器显示模式不是「高对比度」或「夜间模式」。

能不能给 GIF 动图加边框?加了之后动图会变静态吗?

本工具支持 GIF 格式输入,但处理逻辑是提取 GIF 的第一帧作为静态图加边框,输出为静态 PNG/JPEG。如果保留动效,需用专业动图编辑软件(如 Photoshop 逐帧处理)或后端 FFmpeg 方案的工具。本工具定位是快速生成静态带边框图片,适合缩略图、封面图场景。

边框宽度调成 0 后,为什么还能看到一条细线?

边框宽度设为 0 时,理论上不绘制边框。如果仍看到细线,通常是预览渲染时浏览器对 canvas 边缘的抗锯齿残留(约 1 像素)。实际保存的图片中这条线不会存在。可在预览时放大到 200% 确认,或直接保存到本地后查看原图。

这个工具和手机相册自带的边框功能比,有什么优势?

手机相册的边框通常只有几种固定比例和颜色(如正方形白边),且无法精确控制像素宽度。本工具支持实色、阴影、装饰三类边框,宽度可精确到 1 像素,颜色支持十六进制或取色器选择。适合需要统一批量加水印边框的电商主图、社交媒体封面等场景,且无 App 安装成本和广告。

为什么我选的阴影颜色是黑色,但边框看起来是灰色?

阴影边框的最终颜色受透明度(不透明度)和模糊半径影响。即便颜色选纯黑(#000000),如果透明度设为 50% 且模糊半径较大,叠加在白色背景上会呈现灰色渐变效果。可尝试将不透明度拉到 100%,模糊半径设为 0,此时阴影会变成实色边缘,颜色即与选取一致。

隐私保证所有计算与处理均在你的浏览器本地完成,输入数据不会上传服务器,也不会保存或共享。

选择 打开 +新窗口 esc关闭