结论：border-image实现自定义边框的核心是“切图+映射”，必须用border-image-slice按九宫格切割图片，否则会拉伸变形或显示异常；常见错误包括未设基础border样式、slice值不匹配图片结构、未预留四角边距。
直接说结论：用 border-image 实现自定义边框，核心不是“贴图”，而是“切图+映射”——必须配合 border-image-slice 把图片切成 9 宫格，否则图片会拉伸变形或只显示一角。
为什么 border-image 一用就错？常见错误现象
很多人写完 border-image: url(border.png) 30 round; 发现边框是糊的、偏移的、或者根本没显示。原因基本就三个：
- 没配
border基础样式（比如border: 10px solid transparent），浏览器直接忽略border-image； -
border-image-slice值太小（如10）导致四角被切掉，只剩中间条带重复拉伸； - 图片本身没按 9 宫格预留边距（比如 81×81 的图，四角各留 30px，中间刚好 21px 可平铺），结果
slice: 30切出来全是空白。
border-image-slice 是关键：怎么切才不翻车
border-image-slice 决定图片怎么分块，它不是“边框宽度”，而是“从图片边缘向内量多少像素来切”。值为 30 表示：上/右/下/左各切掉 30px，剩下中间区域归为“填充区”（默认丢弃，加 fill 才启用）。
- 切图必须和图片实际结构匹配：如果设计稿边框图是“四角固定图标 + 四边重复花纹”，那图的四角就得有明确留白，不能让花纹跑到角里；
- 单位支持
px和%，但百分比基于图片原始尺寸，动态缩放时容易错位，建议优先用像素值； - 如果图是 120×120，想留出 20px 角，就写
border-image-slice: 20；四个方向不同则写20 30 20 30（上右下左）； - 加
fill关键字（如border-image-slice: 30 fill）才能让中间区域显示为元素背景，否则它被丢弃。
border-image-repeat 控制边框“动效感”
四边（非四角）的图案怎么铺，全看这个属性。别只记名字，要看效果差异：
-
stretch（默认）：把切下来的边条直接拉满，适合纯色渐变或无纹理的边； -
repeat：原样平铺，边缘可能断开，适合小图标类边框（比如爱心虚线）； -
round：缩放图案使其整数倍铺满，边缘对齐无缺口，最常用； -
space：平铺并均匀留空，但兼容性差（IE/旧 Safari 不支持），慎用。
例如做“粉色渐变虚线+爱心”边框，用 round 能保证每段虚线长度一致，爱心图标不会被拉扁或截断。
兼容性和 fallback 必须手动加
border-image 在 Chrome/Firefox/Edge 16+ 都没问题，但 iOS Safari 15.4 之前需要 -webkit-border-image，Opera 12.1 之前要 -o-border-image。更重要的是：它不支持时不会退化为 border-color，而是直接回退到 border-style（比如 solid）——所以你得自己兜底：
div {
border: 10px solid #ff69b4; /* fallback 纯色边框 */
border-image: url(border-pink-heart.png) 30 round;
-webkit-border-image: url(border-pink-heart.png) 30 round;
-o-border-image: url(border-pink-heart.png) 30 round;
}
真正容易被忽略的点是：边框图必须是**矢量友好尺寸**（比如 81×81、120×120 这种能被 3 整除的），否则 round 模式下缩放时像素错位，爱心图标会模糊或抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
