HTML5怎样用border-image做图案边框_HTML5用border-image做图案边框法【素材】

用 border-image 做图案边框的关键是九宫格切图与属性协同：border-image-slice 按像素值切分 3×3 区域，必须配合 border-image-source 和非零 border-width 才生效；推荐 border-image-repeat: round，并注意素材尺寸、透明背景及导出细节对切图精度的影响。

直接用 border-image 做图案边框，关键不是“能不能”，而是“图怎么切、属性怎么配”——多数失败都卡在切图方式和 border-image-slice 的数值上。

切图必须用 9 宫格，且默认按像素值切

border-image 内部按 3×3 九宫格解析图片：四个角保留、四条边重复/拉伸、中间区域丢弃。切分依据是 border-image-slice 的四个值（上右下左），单位默认为像素，且不写单位时就是像素值。

• 如果素材图是 300×300 像素，想让每边留出 30px 作边框区域，就写 border-image-slice: 30（等价于 30 30 30 30）
• 若图带透明背景或内边距，切多了会把内容区误当边框；切少了会导致角落变形或拼接缝隙
• 加 fill 关键字才能让中间区域显示（如 border-image-slice: 30 fill），但绝大多数图案边框不需要它

border-image-source + border-image-slice 必须同时设才生效

只设 border-image-source 没用，浏览器会忽略；只设 border-image-slice 更没用——这两个是联动开关。还得配 border-image-repeat 控制边缘填充方式。

• border-image-repeat: repeat：平铺（适合无缝纹理）
• border-image-repeat: round：缩放至整数倍再平铺（避免截断，推荐首选）
• border-image-repeat: stretch：直接拉伸（易失真，慎用）
• 别忘了先给元素设个基础 border-width，否则边框无宽度，图案不显示

div.pattern-border {
  border: 20px solid transparent;
  border-image-source: url("frame.png");
  border-image-slice: 40;
  border-image-repeat: round;
  border-image-width: 20px;
}

常见报错和加载失败的真正原因

控制台没报错，但边框不出现？大概率是这三件事之一没做：

• 图片路径 404 或跨域（border-image-source 不受 CORS 影响，但本地 file:// 协议下会被浏览器拦截）
• border-width 为 0 或没设（border: none 或 border: 0 会彻底关掉边框渲染通道）
• 切图值超过图片尺寸（比如图高 50px，却写 border-image-slice: 60），此时整个边框退回到纯色 fallback

真正难调的永远不是语法，而是那张图的像素边界在哪、有没有抗锯齿毛边、是否被 PS 导出时自动加了 1px 白边——这些细节决定了 slice 值差 1 都

可能漏一块。