border-color 不支持渐变色是因 css 规范限定其仅接受单色值，写 linear-gradient 会静默失效；实现悬停渐变描边需用 ::before 伪元素模拟（最稳）、clip-path inset（静态显形）或 border-image（极少用）。
直接用 border-color 写渐变色无效，浏览器会静默忽略；要实现悬停时出现渐变描边，必须绕过 border 属性本身，用伪元素、clip-path 或 border-image 模拟——且三者在悬停动画中表现差异明显。
为什么 border-color: linear-gradient() 一定不生效
这是 CSS 规范限制：border-color 只接受单色值（如 #ff6b6b、rgb(255,107,107)），不支持图像或渐变函数。你写 border-color: linear-gradient(to right, red, blue);，浏览器解析失败后直接 fallback 到 transparent 或初始色，看起来像“没反应”或“突然变黑”。这不是兼容性问题，是语法非法。
- 常见错误：给按钮加
border: 2px solid;后只改border-color，结果悬停无变化 - 更隐蔽的坑：用了
border-image却漏写border-image-slice: 1，整条声明被忽略 - 移动端根本不会触发
:hover，所以纯:hover实现的渐变描边在手机上默认不可见
::before 伪元素 + 渐变背景位移是最稳的悬停方案
这是目前唯一能同时满足“悬停触发”“平滑流动感”“圆角完整”“主流浏览器全支持”的做法。核心不是“描边”，而是画一个稍大的渐变矩形压在按钮底下，再通过定位和层级控制它只露边缘。
- 按钮必须设
position: relative，否则::before无法精确定位 -
::before要设content: ""、position: absolute、inset: -3px（数值 = 描边宽度）、z-index: -1 - 渐变背景用
background: linear-gradient(90deg, #3498db, #2ecc71)，background-size: 300% 300%防止位移断层 - 动画靠
background-position从0% 50%→100% 50%，配合transition或@keyframes - 按钮自身
border必须设为transparent，否则会盖住底层渐变层
clip-path: inset() 方案适合静态渐变边框
如果不需要流动效果，只要悬停时“出现”一圈静态渐变边框，这个方案代码最轻、圆角兼容性最好，但不支持动画位移。
- 写法是：悬停时给按钮加
background: linear-gradient(90deg, #e74c3c, #9b59b6)+clip-path: inset(4px)（4px = 边框粗细） -
background-size: 200% 200%避免小按钮上色标重复太密 - 必须配
padding，否则文字会被clip-path切掉 - IE 完全不支持
clip-path，降级为纯色背景，无边框——得额外写background-colorfallback - 不能和
transition连用clip-path值（浏览器不支持过渡 inset 参数），所以“出现”是瞬时的，不是淡入
真正麻烦的不是怎么写，而是判断该用哪种方案：需要流动动画就选 ::before；只要悬停时显形、追求简洁就选 clip-path；而 border-image 在真实项目里几乎没人用——slice 值难调、圆角断裂、移动端 fallback 不可控。别在 border 上死磕，它天生不支持渐变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
