border-image不能直接写linear-gradient是因为它只接受image类型值，需配合border-image-slice:1 fill才能正确显示渐变边框，并提供solid fallback。
border-image 为什么不能直接写 linear-gradient？
因为 border-image 不接受 CSS 渐变函数作为直接值，它只认 image 类型（比如 url()、radial-gradient() 等生成的图像），但你不能写成 border-image: linear-gradient(...)——浏览器会忽略整条声明。
真正能用的是 border-image-source，而 linear-gradient() 和 radial-gradient() 在现代浏览器中属于合法的 image 值，所以必须拆开写，或用简写时确保语法合规。
- 错误写法：
border-image: linear-gradient(to right, red, blue) 1;（无效） - 正确写法：
border-image: linear-gradient(to right, red, blue) 1;—— 看起来一样？其实是有效的，但前提是浏览器支持且 gradient 被解析为 image；不过兼容性有坑，见下一条 - 更稳妥写法：显式使用
border-image-source+border-image-slice
border-image-slice 是什么，为什么设成 1？
border-image-slice 控制如何把背景图切进边框的九宫格。默认值是 100%，会把图拉伸填满整个边框区域，导致渐变被扭曲、重复或丢失方向感。
设成 1（无单位）表示「按像素切，不缩放」，等价于 border-image-slice: 1 fill;，这样 gradient 才能自然平铺/拉伸，保持线性方向不变。
- 常见错误：漏写
border-image-slice，结果只有上下边有颜色，左右边消失 - 如果用了
border-width: 4px，border-image-slice: 1依然有效——它不是像素值，而是“不分割”的语义 - 必须加
fill关键字才能让中间内容区也受渐变影响（否则只作用于边框本身）
兼容性与 fallback 边框怎么写？
IE 完全不支持 border-image，Safari 旧版本对 gradient 作 border-image-source 支持不稳定。所以必须提供 solid 边框 fallback。
- 顺序很重要：先写
border，再写border-image，后者会覆盖前者（但 IE 下直接忽略，保留 solid） - 不要用
border: none再单独设border-image，没 fallback 时边框会彻底消失 - 示例：
element { border: 2px solid #ccc; border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1; border-image-slice: 1 fill; }
伪元素方案比 border-image 更可靠吗？
是的，当你要控制角度、动画或响应式缩放时，::before 或 ::after 配合 position: absolute + background: linear-gradient 更可控，且兼容性好得多。
但代价是多一个 DOM 节点、需要手动计算尺寸、z-index 管理容易出错。
- 适合场景：按钮悬停渐变边框、卡片hover放大+边框动画
- 不适合场景：表格单元格、大量复用的原子组件（维护成本高）
- 关键细节：伪元素必须设
content: ""，且border-radius要和原元素一致，否则圆角处露底色
渐变边框看着简单，但 border-image-slice 的行为、fill 关键字的存在、以及 gradient 作为 image 的隐式转换，这几个点一旦漏掉，就只能看到一条灰边或者干脆没边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
