border-color不支持渐变，需用background-clip或mask模拟；background-clip方案轻量兼容好但要求背景可控，mask方案精确灵活但safari存在兼容问题。
border-color 本身不接受渐变值，写 border: 2px solid linear-gradient(...) 会直接失效，浏览器忽略或回退为黑色。真要实现“渐变边框”，得绕开 border-color，用其他机制模拟视觉效果。
为什么 border-image 看似简单但实际难控
虽然 border-image 支持 linear-gradient，语法也短：
div {
border: 4px solid;
border-image: linear-gradient(to right, #007bff, #6f42c1) 1;
}
但它有三个硬伤：
-
border-radius完全失效——圆角会被裁成直角，且无法修复 - 动画支持极差：
transition: border-image在 Firefox 中静默失败，Safari 常卡住不重绘 - 无法单独控制某一边：比如只让左边渐变、其余透明，
border-image是四边整体拉伸，border-image-slice调整到非整数时行为不可预测 - 错误现象典型：
border-image: linear-gradient(...) 0.5在 Chrome 中可能显示为纯色，控制台无报错但效果丢失
伪元素 + background-clip 是最稳的方案
核心是两步：用透明边框“开窗”，再用背景“从窗外透进来”。关键不在伪元素本身，而在 background-clip 的剪裁逻辑：
- 给元素设
border: 2px solid transparent，占位但不遮挡 - 设置
background: linear-gradient(...)，并加background-clip: padding-box - 此时背景只渲染在内边距区域（不含边框），而边框是透明的，所以渐变色就“透”到了边框位置
- 必须配
padding（至少等于边框宽度），否则padding-box没空间，背景直接被剪没
示例代码：
.btn {
border: 2px solid transparent;
padding: 8px;
background: linear-gradient(90deg, #007bff, #6f42c1);
background-clip: padding-box;
border-radius: 6px;
}
伪元素 + mask 适合需要精确边框区域的场景
当你要严格区分“边框”和“内容”（比如内容带阴影、背景图，又不能被边框覆盖），mask 更干净：
- 伪元素
::before全覆盖，用padding留出边框厚度 -
-webkit-mask和mask配合mask-composite: exclude，把内容区挖空，只留边框区域显示渐变 - 必须写双前缀：
-webkit-mask-composite: xor（Chrome/Safari）和mask-composite: exclude（Firefox） -
pointer-events: none必加，否则伪元素会拦截点击
容易漏的点：如果父元素没设 overflow: hidden 或 position: relative，伪元素可能溢出或定位错乱。
真正难的不是写哪段代码，而是判断该用哪种方案——background-clip 快、轻量、兼容好，但要求内容背景必须纯色或可控；mask 精确、灵活、支持复杂叠加，但 Safari 对 mask-composite 的支持仍偶有 bug，上线前务必真机测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
