CSS边框渐变不支持direction属性，border-image中的linear-gradient方向必须硬编码；变量需整条声明（如--border-grad），不可拆分传参；必须设置border宽度和border-image-slice:1才生效。
边框渐变本身不支持 direction 属性
CSS 的 border-image 虽然能实现边框渐变，但它不接受 linear-gradient(...) 中常见的 to right 这类方向关键词作为独立参数——方向必须硬编码在渐变函数里。也就是说，你不能用一个 CSS 变量去“动态切换”to bottom 和 to right，除非重写整个渐变值。
用自定义属性 + calc() 模拟方向切换（仅限 90° 倍数）
如果你只需要水平/垂直切换（比如 to right ↔ to bottom），可以通过预设两套渐变，并用 calc() 控制透明度叠加来“切换显示”，但更实用的做法是配合 transform: rotate() 配合伪元素模拟——不过这已脱离纯 border 控制。真正可行的变量驱动方案是：
- 定义两个变量：
--grad-dir存方向关键词（如"to right"），--grad-colors存颜色列表（如"#ff6b6b, #4ecdc4"） - 用
border-image: linear-gradient(var(--grad-dir), var(--grad-colors))——但注意：这在 Chrome/Firefox 中会报错，因为var()不能直接插进函数参数位置 - 正确写法只能是：把整条渐变声明写成一个变量，例如
--border-grad: linear-gradient(to right, #ff6b6b, #4ecdc4)，再在border-image中引用：border-image: var(--border-grad) 1
必须加 border-image-slice 才生效
只设 border-image 不会显示渐变边框，常见遗漏点：
-
border宽度必须大于 0（比如border: 4px solid transparent） -
border-image-slice必须显式设为1（或fill 1），否则默认是100%，裁剪掉全部内容 - 如果用了
border-radius，渐变边框可能被截断或失真，建议搭配overflow: hidden或改用background-clip: padding-box模拟
更稳的替代方案：用 background + clip-path 模拟边框流向
当需要运行时通过 JS 切换流向（比如响应用户点击），推荐放弃 border-image，改用伪元素 + background: linear-gradient()：
立即学习“前端免费学习笔记（深入）”；
.box {
position: relative;
--grad-dir: to right;
--grad-colors: #ff6b6b, #4ecdc4;
}
.box::before {
content: "";
position: absolute;
inset: -4px;
z-index: -1;
background: linear-gradient(var(--grad-dir), var(--grad-colors));
border-radius: 8px;
clip-path: inset(4px round 8px);
}
这样 --grad-dir 就能被 JS 动态修改，且无需担心 border-image 的解析限制。唯一代价是多一层渲染，但现代浏览器下几乎无感。
真正卡住的地方往往不是“怎么写”，而是没意识到 border-image 的变量展开规则比 background 严格得多——它不支持函数内插值，所有渐变逻辑必须提前收束到单个变量中。
