border-image: linear-gradient() 不生效是因为必须同时设置 border-image-source、border-image-slice、border-image-repeat 和 border-width+style（transparent），缺一不可。
border-image 不能直接写 linear-gradient() 就生效，必须配齐四个关键属性，否则浏览器会退回到 border-color 的纯色 fallback。
为什么 border-image: linear-gradient() 总是不显示渐变
常见错误现象：写了 border-image: linear-gradient(45deg, red, blue)，但边框还是灰色或透明；控制台没报错，效果却完全不对。
根本原因：CSS 中的 linear-gradient() 是一个 <image></image> 值，但它不会自动被当作 border 图像源——必须显式用 border-image-source 声明，或在 border-image 简写中带完整语法（含 slice 值）。
-
border-image是简写属性，等价于border-image-source+border-image-slice+border-image-repeat，漏掉任意一环都会失效 - 只写
border-image: linear-gradient(...)不带数字（如1），浏览器会按默认border-image-slice: 100%处理，把渐变图切成 9 宫格，中间区域裁掉，只剩四个角的小色块 -
border本身也必须声明宽度和样式（如border: 3px solid transparent），否则没有“边框盒”供图像贴附
border-image 实现渐变边框的最小必要配置
这四条缺一不可，顺序可调，但值必须匹配：
-
border: <width> solid transparent</width>—— 必须设为transparent，否则会盖住渐变 -
border-image-source: linear-gradient(...)—— 推荐用to right或to bottom，避免斜向导致四边颜色错位 -
border-image-slice: 1—— 关键！无单位，表示不裁剪、整张图拉伸填充边框；设为0或100%都可能出问题 -
border-image-repeat: stretch——repeat在小尺寸下易出现色块接缝，stretch更稳
示例（可直接复制）：
div {
border: 3px solid transparent;
border-image-source: linear-gradient(90deg, #ff6b6b, #4ecdc4);
border-image-slice: 1;
border-image-repeat: stretch;
}
border-image 遇到 border-radius 就断裂？这是设计限制
不是你代码写错，是规范层面不兼容：边框渐变图按矩形边框绘制，border-radius 只裁剪内容区，不重映射渐变纹理。结果就是圆角处常出现硬边、空白或色块偏移。
- Safari（v17.4）至今不支持
border-image-source: linear-gradient()，会直接 fallback 到border-color - 即使 Chrome/Edge/Firefox 渲染正常，圆角交界处仍可能有锯齿，尤其在高 DPI 屏幕上
- 不要尝试用
clip-path修边——它裁的是整个元素，会干扰内部交互和溢出行为
真正能兼顾圆角和渐变的方案，只有伪元素：::before 绘制渐变背景，inset: -4px 模拟边框厚度，并手动加 border-radius。
替代方案里哪些真能用，哪些是“看起来可以”
background-clip: border-box 听起来简洁，但实际有坑：
- 它依赖
background的多层语法（如background: linear-gradient(...) border-box, white padding-box），老版本 Safari 对多背景border-box支持不稳定 -
box-shadow: 0 0 0 Npx linear-gradient()根本无效——box-shadow不接受渐变值，所谓“hack”本质是靠模糊投影模拟，无法控制边框粗细或方向 - 伪元素方案虽然多一层 DOM，但渲染稳定、圆角可控、动画友好，2026 年仍是复杂渐变边框的首选
真正容易被忽略的点：所有基于背景的方案（包括 border-image）都要求父容器不能有 overflow: hidden，否则伪元素或渐变边框会被意外裁切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
