必须设置border、border-image-source、border-image-slice、border-image-repeat四属性；border需设transparent，slice必须为1，方向须匹配边框方位，否则渐变错位或失效。
border-image 实现渐变边框必须设这四个属性
直接写 border-color: linear-gradient(...) 是无效的——浏览器会忽略它，只当没写。真正起作用的是 border-image 机制，但它不是“开箱即用”，漏掉任意一个关键属性，边框就显示为纯色或干脆不渲染。
最小必要配置如下：
-
border：必须显式声明宽度和样式，例如border: 4px solid transparent；transparent很重要，否则渐变会被盖住 -
border-image-source：用linear-gradient(to right, #ff6b6b, #4ecdc4)这类生成图像，方向建议用to right或to bottom，斜向（如to bottom right）会导致四边颜色错位 -
border-image-slice：必须设为1（无单位），表示整张渐变图完整映射到边框；设成0或100%在部分浏览器（如 Safari 17+）里会失效 -
border-image-repeat：推荐显式写repeat或stretch，不写时某些旧版 Chrome 默认行为不稳定
伪元素法能保 border-radius，但结构和层叠要小心
如果元素需要圆角，border-image 会出问题：一旦加了 border-radius，渐变边框在圆角处会被裁切、拉伸失真，甚至完全消失。这时该切到伪元素方案。
核心思路是用 ::before 绘制一个稍大的渐变背景框，再用主元素自身遮住中间区域：
- 主元素设
border: 4px solid transparent和background-clip: padding-box，确保背景不溢出到边框区 -
::before设content: ""、position: absolute、宽高比主元素大8px（即边框总厚度），并用background: linear-gradient(...) - 父容器需设
position: relative，否则::before会脱离定位上下文 - 若主元素有内边距（
padding），::before的z-index必须低于主元素，否则遮不住中间内容
两种方案的兼容性与性能差异
border-image 方案在 Chrome 110+、Firefox 115+、Safari 16.4+ 中表现稳定，但 IE 完全不支持（已淘汰）；伪元素法兼容性更好，连 iOS 12 的 Safari 都能跑，只是多一个渲染层。
性能上要注意：
-
border-image不触发重排，但频繁切换渐变色可能引起重绘抖动（尤其在低端 Android 设备） - 伪元素法涉及绝对定位 + 层叠，若页面存在大量同类组件，
::before节点数上升，会略微增加 DOM 树深度和样式计算负担 - 动画渐变边框时，
border-image无法直接transition，只能靠 JS 切换 class；伪元素法则可对background-position做平滑过渡
容易被忽略的坑：渐变方向与边框宽度匹配
很多人把 linear-gradient(to right, ...) 用在上下边框上，结果发现左右两边是单色、上下才是渐变——这是因为 border-image 把渐变图按边框四边分别拉伸，方向没对齐就会错乱。
正确做法是：
- 想让**上下边框**有左→右渐变？用
to right，但需确保border-top和border-bottom宽度一致，否则拉伸比例不同 - 想让**左右边框**有上→下渐变？用
to bottom，同时border-left和border-right宽度也得一致 - 如果四边宽度不同（比如
border: 2px 4px 6px 8px），border-image会强行按比例切割渐变图，极易出现色块断裂；此时应改用伪元素法，手动控制每个边的尺寸
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
