HTML5中border不支持渐变，需用background-image+padding或box-shadow模拟；前者兼容性好、无需额外DOM，关键要设background-origin:border-box和background-clip:padding-box。
HTML5 里不能直接用 border 设渐变边框
CSS 的 border 属性只支持纯色、宽度、样式（如 solid），不支持渐变。所谓“渐变色加实线边框”，本质是绕过原生 border，用其他 CSS 手段模拟出「有渐变、看起来像实线」的视觉效果。
用 background-image + padding 模拟带渐变的实线边框
这是最稳定、兼容性好（支持到 IE10+）、无需额外 DOM 的方案。原理是把渐变画在元素背景上，再用 padding 留出边框区域，最后用 background-clip: padding-box 确保渐变只出现在 padding 区（即“边框位”）。
-
border设为透明或同背景色（避免干扰） - 用
linear-gradient写四条方向渐变，分别对应上右下左 - 配合
background-size控制每条渐变的粗细（例如100% 2px表示全宽、高 2px） - 必须设
background-origin: border-box和background-clip: padding-box，否则渐变会铺满内容区
div {
border: 2px solid transparent;
padding: 2px; /* 边框厚度 */
background:
linear-gradient(to right, #ff6b6b, #4ecdc4) top,
linear-gradient(to bottom, #ff6b6b, #4ecdc4) right,
linear-gradient(to left, #ff6b6b, #4ecdc4) bottom,
linear-gradient(to top, #ff6b6b, #4ecdc4) left;
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
background-repeat: no-repeat;
background-origin: border-box;
background-clip: padding-box;
}用 box-shadow 叠加多层实现单侧渐变边框
适合只需要某一边（比如底边）有渐变实线的场景，代码更轻量，但无法单独控制四边颜色走向。注意：阴影默认是模糊的，要设 blur-radius 为 0 才是实线感。
-
box-shadow的第四个值（spread-radius）决定“边框厚度” - 多个
box-shadow可以叠加不同方向的渐变投影，但需配合inset或偏移控制位置 - 真·渐变阴影需搭配
mask-image或clip-path，但兼容性差，不推荐高频使用
div {
box-shadow:
0 2px 0 0 linear-gradient(90deg, #ff6b6b, #4ecdc4); /* 底边实线渐变 */
}
为什么不用 outline 或伪元素？
outline 不支持圆角、不能精确定位单边、且无法设渐变；伪元素（如 ::before）虽灵活，但增加 DOM 复杂度，响应式下容易错位，z-index 管理也易出问题。高频使用时，优先选 background-image 方案——它不新增节点、可继承、动画友好，而且 Safari/Chrome/Firefox 对多背景渐变的支持已非常成熟。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是 background-clip 和 background-origin 的组合行为：漏掉其中任一，渐变就会溢出到内容区或被裁掉。调的时候先确保这两项写全，再调尺寸和色值。
