border-color 本身不支持渐变，所谓“渐变填满”需用伪元素+背景动画模拟：通过 ::before 设置线性渐变背景，配合 background-size 从 0%→100% 实现填满动效。
border-color 怎么实现渐变填充效果
直接说结论：border-color 本身不支持渐变，也不能“渐渐填满”。所谓“边框颜色渐变填满”，本质是视觉欺骗——用其他 CSS 手段模拟出边框被颜色从一侧逐步覆盖的动效。
用 background + background-size 模拟边框渐变动效
这是最常用、兼容性好、可控性强的做法：把边框区域当成背景来控制，通过缩放 background-size 和位移 background-position 实现“填满”感。
- 必须设置
padding或伪元素占位，因为真实border无法用渐变背景 - 推荐用
::before或::after伪元素画一层“假边框”，再对其背景做动画 - 渐变方向要和“填满方向”一致，比如从左到右填满，就用
linear-gradient(to right, #007bff, #007bff) - 动画关键帧里控制
background-size从0% 100%到100% 100%（水平填满）或100% 0%到100% 100%（垂直填满）
button {
position: relative;
padding: 8px 16px;
}
button::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to right, #007bff, #007bff);
background-size: 0% 100%;
background-repeat: no-repeat;
z-index: -1;
transition: background-size 0.3s ease;
}
button:hover::before {
background-size: 100% 100%;
}
为什么不能直接给 border 写 gradient
border-image 理论上可以，但实际很难做到“渐渐填满”：
-
border-image的渐变需要配合border-image-slice，而 slice 值为 1 时会拉伸，为 0 时会平铺，中间状态难控制 - 动画
border-image在 Safari 和旧版 Chrome 中不触发重绘，常卡死或无效 - 无法单独控制某一条边（比如只要左边填满），
border-image是四边整体生效 - 错误现象示例：
transition: border-image 0.3s在 Firefox 中完全无反应
用 SVG 或 canvas 做更精细控制的边界场景
当需要波浪形、斜向、非矩形或路径级渐变边框时，CSS 就力不从心了，得换方案：
- SVG
<path></path>配合stroke-dasharray+stroke-dashoffset可做描边动画，但只适用于轮廓明确的图形 - Canvas 能逐像素控制，但失去 CSS 响应式能力，且无法被伪类（如
:hover）直接驱动 - 性能提示：SVG 描边动画在大量元素时比 CSS 伪元素略重；canvas 则需手动监听尺寸变化重绘
- 常见坑：
stroke-dasharray="100"和stroke-dashoffset="100"初始值没配对，导致动画一开始就不在起点
复杂点在于：没有一种写法能同时满足“语义清晰”“动画顺滑”“响应式适配”“低维护成本”。选哪种，取决于你愿不愿意为那 1px 的边框动效多写 20 行代码、多测 3 个浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
