HTML5不支持border直接设渐变色，最稳定方式是background+background-clip:padding-box模拟：设transparent边框、padding留空、背景用渐变并裁剪至padding区。
HTML5 本身不支持直接用 border 属性设置渐变色，必须借助 CSS 的 background + background-clip 模拟，或者用 box-shadow 配合伪元素。原生 border-image 虽然可行，但兼容性和控制精度常不如预期。
用 background + background-clip: padding-box 模拟渐变边框
这是目前最稳定、可控性最强的方式，核心是把渐变设为元素背景，再用 background-clip 把背景“裁剪”到边框区域外，再用 padding 留出视觉边框空间。
-
background使用线性或径向渐变（如linear-gradient(to right, #ff6b6b, #4ecdc4)） - 必须设置
padding（比如padding: 2px），否则渐变会直接铺满内容区 -
background-clip: padding-box确保渐变只显示在 padding 区（即“边框位置”），不侵入内容区 - 实际边框设为透明：
border: 2px solid transparent
div {
border: 2px solid transparent;
padding: 2px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #44b5b1);
background-clip: padding-box;
}
用 border-image 直接应用渐变（需注意兼容性）
border-image 支持用渐变作为图像源，但 Safari 旧版本（linear-gradient 作为 border-image-source 支持不完整，且无法单独控制边框粗细与渐变方向对齐。
- 必须配合
border-image-slice: 1，否则渐变会被拉伸/重复 -
border-width决定边框厚度，但渐变本身不会自动适配该宽度——它只是被“切片”后贴上去 - 不能使用
border-radius，圆角会导致border-image渲染异常（尤其 Chrome）
div {
border: 6px solid;
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;
}
用伪元素 ::before + z-index 实现可圆角的渐变边框
当需要 border-radius 或更复杂叠加效果（比如双层渐变边框）时，伪元素方案最灵活。本质是画一个稍大的渐变容器，盖在原元素上，再通过 z-index 和 inset 控制位置。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
position: relative -
::before设content: ""、position: absolute、inset: -2px（负值决定边框厚度） - 伪元素用
background: linear-gradient(...)并加border-radius - 主元素自身背景设为纯色或透明，避免遮挡
div {
position: relative;
background: #fff;
}
div::before {
content: "";
position: absolute;
inset: -2px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #44b5b1);
border-radius: 8px;
z-index: -1;
}
真正容易被忽略的是：渐变边框在高缩放（如 macOS Retina 屏 200% 缩放）或打印预览中可能像素模糊；若用 background-clip 方案，padding 值必须和 border-width 严格一致，差 1px 就会漏出底色。配色本身没有技术限制，但相邻色相跨度太大（如红→紫→青）在窄边框上易产生断层感，建议用 HSL 调整明度保持过渡平滑。
