border-image 配合 linear-gradient 无效是因为缺少 border-image-slice 等必要声明；必须同时设置 border-width、border-image-source、border-image-slice 和 border-image-repeat 才能生效。
border-image 配合 linear-gradient 为什么没效果
直接写 border-image: linear-gradient(...) 大概率不生效，因为 border-image 默认不自动拉伸渐变，且必须显式设置 border-image-slice，否则浏览器当无效值丢弃。
-
border-image不是“给边框上色”，而是用一张图（含渐变生成的图）来填充边框区域，所以必须配border-image-slice - 常见错误：只写
border-image: linear-gradient(to right, red, blue);—— 这行 CSS 完全无效，linear-gradient()在这里不是颜色值，而是图像值，但缺少切片控制 - 必须至少设
border-image-slice: 1;（或border-image-slice: 1 fill;），否则渐变图被裁成空 - 边框宽度（
border-width）必须提前声明，否则border-image没渲染目标
正确写法：四步缺一不可
要让边框真正显示线性渐变，这四个声明得凑齐，顺序不重要，但漏一个就白写：
- 设定边框宽度：
border-width: 4px;（不能是0或未声明） - 用
linear-gradient生成图像：border-image-source: linear-gradient(to right, #ff6b6b, #4ecdc4); - 切分图像：
border-image-slice: 1;（1表示不裁剪，完整使用；加fill可让中间内容也被渐变覆盖，按需选） - 指定铺放方式：
border-image-repeat: repeat;或round/stretch（默认是stretch，但显式写更稳）
完整最小可用示例：
div {
border-width: 4px;
border-style: solid;
border-image-source: linear-gradient(to right, #ff6b6b, #4ecdc4);
border-image-slice: 1;
border-image-repeat: round;
}border-image-repeat 的取值怎么选
渐变边框是否“断开”“拉伸变形”或“重复拼接”，全看这个属性。它不像背景渐变那么宽容：
立即学习“前端免费学习笔记（深入）”；
-
stretch：把渐变图直接拉满整条边——可能导致色块糊成一片，尤其角度小或颜色过渡少时 -
repeat：平铺，但可能在角落出现错位或硬衔接（因边框四角是独立区域） -
round：最常用，自动缩放渐变图以适配边长，避免碎裂，视觉更连贯 - 注意：
border-image-repeat是分别控制上下、左右的，如border-image-repeat: round space;第一个值控上下，第二个控左右
兼容性和 fallback 方案
所有现代浏览器都支持 border-image + linear-gradient，但 IE 完全不支持，且 Safari 旧版本（≤12.1）对 border-image-slice: 1 fill 解析不稳定。
- 别指望用
border-color做降级——border-image一旦生效，border-color就被忽略，得靠@supports - 稳妥 fallback 写法：
@supports (border-image: linear-gradient(#000, #000)) {
.fancy-border {
border-width: 4px;
border-style: solid;
border-image-source: linear-gradient(to bottom, #5a5a5a, #2c2c2c);
border-image-slice: 1;
border-image-repeat: round;
}
}
.fancy-border {
border: 4px solid #333; /* fallback for IE / old Safari */
}真正容易被忽略的是：border-image 的“图”本质意味着它不受 border-radius 影响——圆角边框+渐变，四个角仍是直角切割，想圆润得靠额外遮罩或伪元素补救。
