无需登录 数据私有 本地保存

CSS边框图片生成器 - 九宫格切片直观

14
0
0
0

CSS 边框图片生成器 - 九宫格切片可视化

直观调整九宫格切片线，实时预览 border-image 效果，一键复制 CSS 代码。

图片切片编辑器
边框图案 - 拖拽切割线调整九宫格切片
↕
↕
↔
↔
蓝=角(保持) 绿=边(拉伸/重复) 红=中心(默认丢弃)
实时预览
边框预览区域
切片参数 (Slice)
px
px
px
px
边框设置
8px30px80px
00px40px
生成的 CSS
/* 调整切片参数以生成 CSS */
常见问题与知识点
九宫格切片（9-slice scaling）是 border-image 的核心概念。通过上、右、下、左四条切割线将图片分为9个区域：4个角保持原样不变，4条边根据设置进行拉伸或重复，中心区域默认被丢弃（除非使用 fill 关键字）。这样无论元素尺寸如何变化，边框的角落始终保持清晰，边缘自适应填充。
四个值顺序为 上、右、下、左（与 margin/padding 一致）。对于光栅图像（PNG/JPG），数值默认单位为像素；对于矢量图（SVG）则为百分比。例如 border-image-slice: 30 40 30 40; 表示从顶部向内30px、右侧向内40px、底部向内30px、左侧向内40px处切割。也可以使用1-3个值简写，规则与 margin 相同。
默认情况下，九宫格的中心区域会被丢弃，元素的背景（background）会透过中心显示。添加 fill 关键字后（如 border-image-slice: 30 fill;），中心区域会保留并填充到元素的内容区域，覆盖背景。这在需要边框图案同时作为内容背景时非常有用。
  • stretch（默认）：拉伸边缘切片以填充边框长度，可能导致变形。
  • repeat：重复平铺边缘切片，可能在末端被截断。
  • round：重复平铺并自动调整切片数量，使末端完整显示，切片可能略微缩放。
  • space：重复平铺并在切片之间均匀分配间距，使末端完整显示，切片保持原始大小。
切片值应恰好包围图片中需要保留的角落装饰。切片太小会导致角落被拉伸变形；切片太大会浪费边缘的装饰空间。建议切片值等于图片中角落装饰元素的尺寸。在本工具中拖拽切割线即可直观找到最佳位置——让蓝**域刚好覆盖角落装饰，绿**域覆盖边缘花纹。
常见原因：① 必须设置 border-style: solid（或其它非 none 值），border-image 才能生效；② border-width 需大于0，否则没有空间显示边框图片；③ 检查图片路径是否正确；④ border-image-slice 值不能超过图片尺寸；⑤ 确保图片已加载完成（跨域图片需设置 CORS）。
支持所有浏览器可渲染的图片格式：PNG、JPG、WebP、SVG、GIF 等，也支持 CSS 渐变（通过 border-image-source: linear-gradient(...)）。浏览器兼容性方面，所有现代浏览器（Chrome、Firefox、Safari、Edge）均良好支持，IE11 需要 -ms- 前缀但基本可用。移动端 iOS Safari 和 Android Chrome 完美支持。
🔧 相关工具