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 调整明度保持过渡平滑。