点九图工具

拖动四条切线定义九宫格，实时预览 border-image 效果，导出 CSS 与裁剪后的最小 PNG

切片编辑

拖拽图片到此处，或

PNG / SVG / WebP 均可

实时预览

先导入一张图片

参数

切片边距（px）

边框宽度（border-image-width）

横向重复

纵向重复

中心裁剪

删除中心多余行列得到最小图，CSS 代码无需修改

样式代码
.nine-patch {
  border-style: solid;
  border-image-source: url("YOUR-IMAGE-PATH.EXT");
  border-image-slice: 24 fill;
  border-image-width: 24px;
  border-image-outset: 0px;
  border-image-repeat: stretch;
}