可通过CSS的transition与border-color实现纯色边框渐变；2. 使用伪元素+background-clip可模拟动态渐变边框；3. border-image能直接设置渐变边框并支持过渡，但浏览器兼容性有限；推荐根据需求选择方案。
卡片边框颜色渐变可以通过 CSS 的 transition 和 border-color 配合实现，但要注意：直接对 border-color 使用 transition 是支持的，只要起始和结束颜色都是明确的色值（如 red 到 blue、#f00 到 #00f 等），浏览器就能自动计算中间过渡帧。
1. 基础实现：border-color 过渡
给元素设置初始边框颜色，并在 hover 时改变颜色，配合 transition 实现平滑过渡。
.card {
width: 200px;
height: 200px;
border: 2px solid #ff6b6b;
transition: border-color 0.3s ease;
}
.card:hover {
border-color: #4ecdc4;
}
这样鼠标移上时，边框颜色会从红色渐变为青绿色。
2. 实现更炫的动态渐变边框（伪元素 + background-clip）
如果想实现类似“流动渐变色边框”，比如从红到紫的渐变线条，border-color 本身不支持渐变色值（如 linear-gradient），所以不能直接写 border-color: linear-gradient(...)。需要借助伪元素和背景裁剪来模拟。
立即学习“前端免费学习笔记（深入）”；
.gradient-border-card {
position: relative;
background: white;
width: 200px;
height: 200px;
z-index: 1;
}
.gradient-border-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d8);
border-radius: 8px;
z-index: -1;
transition: background 0.4s ease;
}
.gradient-border-card:hover::before {
background: linear-gradient(135deg, #9b59b6, #3498db, #1abc9c);
}
这种方式通过伪元素铺一层带渐变的外框，利用负的 z-index 显示在底层，形成“渐变边框”效果，并且可以对 background 渐变做过渡动画。
3. 使用 border-image 实现渐变边框
CSS 提供了 border-image 属性，可以直接将渐变作为边框图像使用，再配合 transition 控制变化。
.border-image-card {
width: 200px;
height: 200px;
border: 4px solid;
border-image: linear-gradient(45deg, #ff7675, #6c5ce7) 1;
transition: border-image 0.4s ease;
}
.border-image-card:hover {
border-image: linear-gradient(135deg, #fd79a8, #e17055) 1;
}
注意：border-image 不像 color 那样能完美插值所有渐变，部分浏览器对渐变类型之间的过渡支持有限，建议固定渐变方向或用 JS 动画增强。
总结与建议
- 普通纯色边框渐变：直接用 transition: border-color 即可。
- 想要渐变色边框：使用 ::before 伪元素 + background + background-clip 或 border-image。
- 动画流畅性要求高：推荐伪元素方案，控制更灵活。
- 避免对复杂渐变做 transition，可能卡顿或无效。
