最接近“真·彩色边框”的方案是 border-image + linear-gradient，但不支持圆角裁剪、hover 动画，且 Safari 旧版易失效；需显式声明 border 宽度与样式、匹配切片值、加浏览器前缀；圆角会裁掉拐角渐变，此时应改用伪元素方案。
直接用 border-image + linear-gradient 是最接近“真·彩色边框”的方案，但必须注意它不支持圆角裁剪、不能响应 hover 动画、且在 Safari 旧版本中容易失效。
border-image 配合 linear-gradient 实现渐变边框
这是唯一能真正让 border 本身带渐变色的方式，原理是把渐变当作图像铺到边框上：
-
border必须显式声明宽度和样式（如border: 4px solid transparent），否则border-image不生效 -
border-image的切片值（如1或20 20）要匹配边框宽度，否则渐变会被拉伸或截断；常见写法是border-image-slice: 1 - 必须写全浏览器前缀（
-webkit-、-moz-）才能覆盖 Chrome/Firefox 旧版，现代浏览器可只留标准linear-gradient - 圆角（
border-radius）会裁掉渐变边框的拐角——这不是 bug，是规范行为；若需圆角边框渐变，得换伪元素方案
示例代码：
.btn-gradient-border {
border: 4px solid transparent;
border-image: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1) 1;
border-image-slice: 1;
}用伪元素模拟渐变边框（兼容圆角 + hover 动画）
当需要圆角、悬停缩放、阴影或动画时，border-image 就力不从心了。主流做法是用 ::before 伪元素盖一层渐变背景，再通过 z-index 和 transform 控制层级与偏移：
立即学习“前端免费学习笔记（深入）”；
- 按钮本体设
position: relative，伪元素设position: absolute并撑满父容器 - 伪元素用
background: linear-gradient，再加border-radius保持和按钮一致 - 为避免遮挡文字，伪元素
z-index设为 -1；若要实现“边框感”，可用inset阴影或transform: scale(0.98)微缩放制造间隙 - hover 动画可以直接作用于伪元素的
transform或background-position，比border-image灵活得多
关键片段：
.btn-pseudo-border {
position: relative;
padding: 0.75em 1.5em;
border-radius: 8px;
}
.btn-pseudo-border::before {
content: '';
position: absolute;
top: -2px; right: -2px; bottom: -2px; left: -2px;
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a1c4fd);
z-index: -1;
border-radius: 10px; /* 比按钮大 2px，形成边框厚度 */
}别踩这些坑：border-color 不能渐变，-moz-border-*-colors 已淘汰
有人试过用 border-color 多值写法（如 border-color: red green blue yellow）想模拟渐变，这在 CSS 规范里根本不存在——border-color 只接受单色或四值（上下/左右），不支持渐变。
-
-moz-border-top-colors等私有属性曾用于 Firefox 3–15，但早已被废弃，现代 Firefox 完全不识别 - 试图用
box-shadow多层叠加模拟边框渐变，会导致性能下降（尤其在移动端），且难以对齐圆角边缘 - 用 SVG 作为
border-image源虽可行，但增加请求、失去动态配色能力，违背“纯 CSS”初衷
真正可靠的渐变边框，要么老老实实用 border-image 接受它的限制，要么用伪元素方案主动放弃“物理 border”转而追求视觉等效——后者才是现代项目里更可控、可维护的选择。
