border-color 可以 transition，但仅限于明确纯色间变化；border-image 不可动画；推荐用伪元素 background 渐变 + background-position 过渡实现渐变边框效果。
border-color 能不能直接 transition
能，但有前提：必须是可动画的 CSS 属性值，且起始和结束状态都是明确的、可计算的颜色（比如 #000 → rgb(255, 0, 0) 或 hsl(0, 100%, 50%)）。不支持从 transparent 直接到渐变色，因为 border-color 不接受 linear-gradient() —— 它只认纯色。
为什么 border-image + transition 行不通
border-image 本身不可动画，CSS 规范里它被列为「not animatable」。哪怕你用 border-image-source 换图、或靠 border-image-slice 做变化，浏览器都不会触发平滑过渡。常见错误是写成：
transition: border-image 0.3s;
这行代码完全无效，控制台不会报错，但也不会有任何过渡效果。
真正可行的渐变边框切换方案
用伪元素模拟边框，再对它的 background 做渐变 + transition。这是目前最稳定、兼容性好（Chrome 4+ / Firefox 4+ / Safari 5.1+）、且能精确控制渐变方向和停顿点的做法。
立即学习“前端免费学习笔记（深入）”；
- 给目标元素设
position: relative - 用
::after伪元素铺满容器，z-index: -1确保在底层 - 伪元素的
background: linear-gradient(...)，并设置padding或inset来“留出”内容区域，形成视觉边框 - 对
background-position或background-size做 transition（比直接动渐变色更可控）
示例关键片段：
.btn {
position: relative;
}
.btn::after {
content: '';
position: absolute;
inset: -2px; /* 比原尺寸大 2px，形成 2px 边框感 */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
z-index: -1;
background-size: 200% 200%;
transition: background-position 0.4s ease;
}
.btn:hover::after {
background-position: 100% 100%;
}容易被忽略的细节
渐变边框不是“换颜色”，而是“换背景的渲染区域”。很多人卡在 hover 后没反应，其实是忘了加 background-position 初始值：
- 没设初始
background-position，浏览器默认是0% 0%，但 transition 不会从隐式值开始动画 - 伪元素未设
content: ''，会导致它不渲染（即使有background） - 父元素若用了
overflow: hidden，可能把伪元素的“外扩边框”给裁掉 - 想兼容深色模式？别只切
border-color，得监听prefers-color-scheme并重置伪元素的background
真正的难点不在写几行 CSS，而在确认那个“看起来像边框”的东西，到底是谁在负责绘制、谁在负责过渡、谁又在偷偷裁剪它。
