border-image不显示渐变的主因是默认border-width为0且border-style为none，需显式设置border-width和非none样式；渐变须用linear-gradient内联书写；border-image-slice应设为1 fill以避免拉伸变形；Safari等浏览器存在兼容性问题。
border-image 为什么边框没显示渐变
常见现象是写了 border-image 却看不到效果，本质原因是默认边框宽度为 0，而 border-image 不会自动撑出视觉边框——它只负责“贴图”，不负责“占位”。
- 必须显式设置
border-width（比如border: 5px solid transparent），否则即使图片加载成功也完全不可见 -
border-style不能是none，至少得是solid、dashed等可渲染样式 - 渐变背景图需用
linear-gradient生成，直接写在border-image值里，不能靠外部图片 URL（除非你真有带透明边缘的切图）
示例：
box {<br> border: 4px solid;<br> border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;<br>}
border-image-slice 怎么设才不拉伸变形
border-image-slice 控制图像如何切分并映射到四条边上，设错会导致中间内容被裁掉、边框出现空白或重复拼接。它的默认值是 100%，对渐变这种无纹理图像来说几乎总是错的。
- 对纯渐变，应设为
1（即按像素单位切 1px 边缘），这是最安全的取值，能保证四边均匀拉伸、不丢失颜色过渡 - 若用真实图片做边框，才需要根据图片边框区域高度/宽度调整数值，比如
30表示从上下左右各切 30px - 加
fill关键字（如border-image-slice: 1 fill）才能让渐变铺满整个边框区域，否则中间内容区可能被留白
兼容性差？Safari 和旧版 Chrome 的坑
border-image 在 Safari 上长期存在解析 bug：当使用 linear-gradient 作为源且未指定尺寸时，某些版本（如 Safari 14–15）会直接忽略整条声明；旧版 Chrome（border-image-slice: 1 的处理也不一致。
立即学习“前端免费学习笔记（深入）”；
- 务必加浏览器前缀：用
-webkit-border-image覆盖 Safari，现代写法建议保留双写 - 避免只写
border-image: linear-gradient(...)，补全border-image-source+border-image-slice拆开写更可控 - 测试时重点关注右下角——那里最容易因切片计算偏差漏掉一像素渐变衔接
替代方案：用 box-shadow 模拟渐变边框是否靠谱
当 border-image 太难调或要支持 IE，有人试 box-shadow: 0 0 0 2px linear-gradient(...)，但这是伪边框：它不参与盒模型计算，无法响应 border-radius 圆角裁剪，且多层阴影叠加易糊。
- 真正需要圆角边框渐变时，
border-image是唯一标准解，别硬套box-shadow - 如果只是外发光效果，
outline+outline-offset配合渐变背景更轻量，但 outline 不支持径向渐变 - 复杂场景（比如带内阴影+渐变边框+自适应圆角），老实用
border-image，把调试重点放在slice和width的配合上
边框渐变看着简单，实际卡点都在那 1px 的 border-width 和那个不起眼的 fill 关键字上。漏一个，整个效果就断了。
