设计配色 · 阴影 / 边框

Border-Image 生成

切图 9 宫格/实时预览

✓本地处理 · 不上传 ✓免费 · 无需登录 ✓无次数限制累计 100 次使用

图源Gradient Source

渐变 type

角度 angle 45°

切片9-Slice · 拖动切割线改 slice

填充中心 fill

平铺repeat / width / outset / border

平铺 repeat

边框宽度 border-width 28px

image-width 倍率 1×

外延 outset 0px

预设Gallery · 渐变 / 霓虹 / 花边 / 像素 / 金框

Border
Imageborder-image

border-image 调盒尺寸看 round / repeat / space 差异

盒宽 W300px

盒高 H190px

就绪 · 9 宫格切片实时生成 border-image · 全程浏览器本地处理

第一节

关于本工具

About

设计师切图做九宫格边框时，最怕手动计算四个角与四边的像素分配，稍错一点图片在浏览器里就变形。上传图片、设定切割行数列数，工具实时把九个区域标出来并生成 CSS border-image 代码，预览效果即时可见。所有切片计算在浏览器本地完成，图片不上传服务器，适合处理含敏感元素的 UI 设计稿。

使用场景

壹

手游界面适配

为《代号：曙光》设计技能按钮时，美术给的圆角矩形切图在 iPhone 和安卓全面屏上拉伸变形。用本工具把按钮切成九宫格，四角保持 8px 圆角不缩放，中间区域自适应拉伸。调试时拖拽滑块实时预览，3 分钟确定 4 套不同圆角半径的九宫格参数，提交开发后无需二次返工。

贰

H5 弹窗背景图

双十一活动弹窗的渐变背景图 1200×800px，放到不同手机屏幕边缘总出现白边。设计师说重绘 5 套尺寸，开发说用 repeat 会断渐变。用本工具把背景图切成九宫格，四个角固定渐变纹理，中间区域平铺纯色，任何分辨率下边缘无缝衔接。省去 5 套图的导出时间，上线后无适配投诉。

叁

微信小程序卡片

开发「每日菜谱」小程序时，菜品卡片左上角有圆角标签，右下角有收藏图标。用普通背景图时，卡片宽度随屏幕变化，标签和图标被拉伸变形。用本工具把卡片切成九宫格，左上角和右下角作为固定区域，中间区域自适应缩放。实时预览确认变形边界后，直接复制参数到 wxss，一次过审。

肆

游戏内聊天框

MMO 游戏聊天框背景是一张带半透明磨砂质感的 PNG，四角有圆角弧度和发光描边。用 CSS 切图时，四角发光区域被拉伸成块状。用本工具把聊天框切成九宫格，四角发光区域锁定 40×40px，中间区域平铺透明，任意宽度下发光效果不变。实测 3 组分辨率（320px/480px/720px），预览无异常后提交。

伍

电商详情页按钮

「立即购买」按钮在商品详情页需要适配 5 种屏幕宽度（320dp-428dp）。设计稿上的按钮是渐变蓝底 + 白色圆角 + 阴影，用 background-image 拉伸后阴影变成椭圆。用本工具把按钮切成九宫格，上下左右各 12px 固定区域，中间渐变平铺，阴影和圆角保持设计稿比例。实时预览确认无畸变后，输出参数给前端。

第二节

使用指南

Getting Started

使用步骤

1在「源图片」区域上传一张 PNG 或 JPEG，预览区立即显示原图与四角锚点
2拖动四角锚点或直接在「上/下/左/右」输入框键入像素值，9 宫格分割线实时重绘
3点击「填充方式」下拉菜单选择 stretch / repeat / round，预览区同步更新边框平铺效果
4调整「边框宽度」滑块（1–100px），右侧预览框中的 border-image 效果即时变化
5点击「复制 CSS」按钮，代码片段自动写入剪贴板，可直接粘贴到样式表中

输入输出示例

输入	输出	说明
上传一张 400×400 像素的纯色矩形图片，设置上、右、下、左切图偏移均为 100px	生成一个 9 宫格切片预览图，四个角各 100×100 像素，上/下中间条 200×100 像素，左/右中间条 100×200 像素，中心区域 200×200 像素	常规：对称等距切割，验证基础 9 宫格布局是否正确，所有切片完整无重叠
上传一张 200×200 像素的圆角按钮图片，设置上=20px、右=40px、下=20px、左=40px	生成 9 宫格切片：四个角为 20×20、20×40、20×20、20×40 像素，中间条和中心区域按剩余尺寸分配	常规：非对称切割，验证工具能正确处理不同边距值，适合按钮等 UI 元素
上传一张 100×100 像素的图片，设置上=50px、右=50px、下=50px、左=50px	生成 9 宫格切片：四个角各 50×50 像素，上/下中间条 0×50 像素，左/右中间条 50×0 像素，中心区域 0×0 像素	边界：切图偏移等于图片尺寸的一半，导致中间条和中心区域尺寸为 0，验证工具对零尺寸切片的处理
上传一张 300×300 像素的图片，设置上=150px、右=150px、下=150px、左=150px	生成 9 宫格切片：四个角各 150×150 像素，上/下中间条 0×150 像素，左/右中间条 150×0 像素，中心区域 0×0 像素	边界：切图偏移总和等于图片尺寸，中心区域消失，验证工具在极端比例下的稳定性
上传一张 50×50 像素的图片，设置上=60px、右=60px、下=60px、左=60px	提示错误：切图偏移值（60px）超过图片尺寸（50×50px），请调整偏移值或使用更大图片	易错：用户误设偏移大于图片尺寸，验证工具是否有输入校验和友好错误提示
上传一张 800×600 像素的风景照片，设置上=0px、右=0px、下=0px、左=0px	生成 9 宫格切片：四个角各 0×0 像素，上/下中间条 0×600 像素，左/右中间条 800×0 像素，中心区域 800×600 像素（即整张图片）	边界：所有偏移为 0，验证工具对零偏移的处理——此时 9 宫格退化为单张图片，中心区域覆盖全图
上传一张 200×200 像素的渐变背景图片，设置上=10px、右=10px、下=10px、左=10px，然后调整切图偏移为上=50px、右=50px、下=50px、左=50px	第一次生成 10px 偏移的切片预览，第二次生成 50px 偏移的切片预览，两个结果实时切换显示	易错：用户可能期望切图偏移能动态调整并实时预览，验证工具是否支持参数修改后即时更新输出

常见错误对照

1.切片数量与 border-image-width 不匹配导致拉伸变形

✗ 错误border-image: url('slice.png') 30 30 30 30 stretch stretch;

✓ 修复border-image: url('slice.png') 30 30 30 30 fill stretch stretch; 配合 border-image-width: 30px;

border-image-slice 定义切片像素，若 border-image-width 未显式设置则默认等于切片值。若容器尺寸与切片比例不一致，不设 fill 会导致中间区域被裁切，出现空白或拉伸变形。

2.切片值超出图片尺寸导致整张图被拉伸

✗ 错误border-image: url('100x100.png') 120 fill / 20px;

✓ 修复border-image: url('100x100.png') 30 fill / 20px;

border-image-slice 值不能超过图片对应边的实际像素。若图片 100×100，切片 120 则所有边都超出，CSS 会退化为将整张图拉伸为边框，失去九宫格效果。

3.未设置 border-image-repeat 导致边缘重复出现锯齿

✗ 错误border-image: url('tile.png') 20 fill;

✓ 修复border-image: url('tile.png') 20 fill round;

默认 repeat 为 stretch，若切片图有纹理或渐变，拉伸会失真。用 round 可等比例重复铺满边缘，避免拉伸变形；用 repeat 则可能边缘截断。

4.border-image-source 路径错误或跨域导致图片不加载

✗ 错误border-image: url('images/border.png') 20 fill; 但文件在 /assets/border.png

✓ 修复border-image: url('/assets/border.png') 20 fill; 或使用 base64 data URI

CSS 相对路径基于样式表文件位置，而非 HTML 页面。跨域图片需服务器返回 CORS 头，否则浏览器会因安全策略拒绝绘制到 border-image。

5.切片值使用百分比时未考虑图片实际尺寸

✗ 错误border-image: url('200x200.png') 50% fill;

✓ 修复border-image: url('200x200.png') 25% fill;（即 50px 切片）

百分比基于图片尺寸计算。50% × 200px = 100px，若期望切片 50px 则应为 25%。百分比与像素混用易算错，建议统一用像素值。

6.border-image-outset 设置过大导致边框溢出容器

✗ 错误border-image: url('pattern.png') 20 fill / 20px / 50px;

✓ 修复border-image: url('pattern.png') 20 fill / 20px / 10px;

outset 使边框向外扩展，若值超过容器父元素 overflow 范围，边框会被裁剪。通常 outset 应 ≤ 容器 padding 区域，避免视觉截断。

7.未设置 border-style 导致 border-image 不生效

✗ 错误border-image: url('border.png') 30 fill; border-width: 10px;

✓ 修复border-image: url('border.png') 30 fill; border: 10px solid;

border-image 需要 border-style 非 none 才能渲染（规范规定）。仅设 border-width 不够，必须显式指定 border-style（如 solid）。

8.九宫格中间区域未用 fill 关键字导致内容背景穿透

✗ 错误border-image: url('frame.png') 30 stretch stretch;

✓ 修复border-image: url('frame.png') 30 fill stretch stretch;

默认 border-image-slice 不包含中间区域，元素背景色或内容会从九宫格中心透出。加 fill 关键字才将切片中间部分作为背景填充。

第三节

工作原理

How It Works

核心公式

slice_width = (image_width - 2 × border_width) ÷ 3

变量说明

slice_width中间切片宽度，像素
image_width原始图片总宽度，像素
border_width边框区域宽度，像素

示例

一张 300×200 像素图片，border-width 设为 30 像素：中间切片宽度 = (300 - 2×30) ÷ 3 = (300 - 60) ÷ 3 = 240 ÷ 3 = 80 像素。同理高度切片 = (200 - 2×30) ÷ 3 ≈ 46.67 像素。最终 9 宫格各切片尺寸为：四角 30×30，上下中 80×30，左右中 30×46.67，中心 80×46.67。

用户输入本地处理输出结果

第五节

常见问题

Q & A

问怎么用这个工具把我的图片切成九宫格？＋

答

上传一张图片后，工具会自动生成一个 3×3 的网格。你可以拖动网格线或直接在输入框里输入上右下左四个方向的像素偏移值，来调整每条切边的位置。右侧预览区会实时显示九块切片拼成的边框效果。确认满意后，点击“导出”按钮就能下载所有切片图片。不需要手动用 Photoshop 算像素。

问为什么我切出来的图片做边框时，四个角会变形？＋

答

通常是因为切片偏移值没设置好。Border-Image 的核心逻辑是：四角切片保持原样，四边切片沿对应轴拉伸或平铺。如果偏移值让角部切片包含了边框中间的内容，拉伸后就会扭曲。建议将上右下左四个值设得比图片的圆角或装饰元素稍大一点，确保角部只包含纯色或简单纹理。预览区会实时显示效果，可以边调边看。

问这个工具支持 PNG 透明背景的图片吗？＋

答

支持。上传 PNG 图片后，切出来的九宫格切片会保留原始透明度。导出时默认输出 PNG 格式，透明部分不会变成白色块。如果你需要把切片用在网页 CSS border-image 上，透明背景的切片可以很好地叠加在任意底色上。注意：如果图片本身有半透明渐变，切片后边缘可能会出现细线，建议偏移值避开渐变区域。

问切出来的图片最大能到多少像素？有没有尺寸限制？＋

答

本工具在浏览器本地处理，不限制上传图片的原始尺寸。但受设备内存影响，建议单边不超过 4096 像素，否则预览和导出可能卡顿。切片后的每块大小取决于你设置的偏移值——例如偏移 50px，则九块切片每块最大 50×50px（角部）或 50×剩余长度（边部）。导出时切片会按实际像素输出，不会自动缩放。

问我的图片上传后会不会被存到服务器上？安全吗？＋

答

不会。本工具完全在浏览器本地运行（实现方式标注为 FE），图片不会上传到任何服务器。所有切片计算、预览渲染都在你的电脑内存里完成，关闭页面后数据自动清除。无需担心隐私泄露，适合处理包含敏感设计稿或未公开素材的图片。如果还是不放心，可以在断网环境下使用。

问为什么我设了边框后浏览器显示不对，是不是工具切错了？＋

答

先检查 CSS 写法。工具导出的切片默认是九张独立图片，你需要用 border-image-source 引用它们，并用 border-image-slice 定义偏移值（通常和你切图时设的值一致）。常见错误是：只用了 border-image 简写属性但没写 slice 值，导致浏览器用了默认的 100%。建议复制工具生成的 CSS 片段直接粘贴，不要手动拼写。

问和用 Photoshop 切片比，这个工具有什么优势？＋

答

主要是速度和实时反馈。PS 里需要手动拉参考线、用切片工具划分区域、再导出为 Web 所用格式，步骤多且无法预览边框效果。本工具上传即生成网格，拖动滑块或输入数值时预览区同步更新，能立刻看到切片拼成边框后的样子。另外完全免费，不用装软件，适合快速出图验证想法。缺点是只能做 3×3 的九宫格，复杂多格布局还得用 PS。

问切出来的图片颜色和原图不一样，偏淡了怎么办？＋

答

检查浏览器是否开启了色彩管理。部分浏览器（如旧版 Chrome）在 Canvas 渲染时会应用 sRGB 色彩空间，导致切片颜色略偏淡。一个简单验证方法：把原图和切片拖到同一个看图软件里对比。如果确实有差异，可以尝试在导出前把图片转为 sRGB 色彩配置文件（大多数网页图片默认就是 sRGB），或换用最新版浏览器重试。工具本身不会主动修改颜色。

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