border本身不支持渐变，因css规范限定其颜色值仅接受纯色；需用background-image配合background-clip: padding-box与padding模拟，padding充当边框厚度占位符。
为什么 border 本身不支持渐变？
因为 CSS 规范里 border 的颜色值只接受纯色（color、transparent 或预定义关键字），不接受 linear-gradient() 这类图像值。硬写 border: 2px solid linear-gradient(...) 会直接失效，浏览器静默忽略。
真正能承载渐变的只有 background-image，所以得把“边框”视觉效果从背景层“抠”出来——靠的就是 background-clip 和留白（padding）配合。
background-clip: padding-box 是怎么让渐变露出来的？
默认情况下，元素背景（包括渐变）会铺满 border-box 区域，也就是盖在边框上；设成 padding-box 后，背景就只画到内边距边缘，不再覆盖边框区域。但此时我们根本没设 border，那“边框位置”其实是空的——正好用 padding 留出一圈空白，再把渐变背景画在内容区外侧，视觉上就成了“渐变边框”。
关键点：padding 不是可选的装饰，它是制造“边框厚度”的物理占位符。
- 想要 2px 渐变边框？必须设
padding: 2px - 想兼容圆角？
border-radius要加在元素上，且值不能超过padding，否则渐变会被裁掉 - 如果同时用了
outline或其他边框类属性，可能干扰视觉，建议清空border: none
完整可运行的输入框代码长什么样？
下面这段是实际项目中验证过的最小可行写法，没有多余修饰，只解决“渐变边框”这一件事：
.gradient-input {
border: none;
padding: 2px;
border-radius: 4px;
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
background-clip: padding-box;
/* 内容区保持白色或透明，避免遮盖渐变 */
background-color: white;
}
<p>.gradient-input:focus {
outline: none;
}</p>
注意：background-color 必须显式设置（哪怕设成 transparent），否则某些浏览器（如 Safari）在重绘时可能把渐变整个盖掉；outline: none 是为了去掉原生 focus 边框干扰。
移动端和旧版 Safari 容易卡在哪？
iOS 15.4 之前，Safari 对 background-clip: padding-box 在表单控件上的支持不一致，尤其当 input 有 appearance: none 时容易失效。最稳的解法是套一层 <div> 容器，把渐变样式写在容器上，<code>input 自身只负责内容和交互。
另一个隐形坑：如果父容器有 overflow: hidden，而你又用了较大 border-radius，渐变边缘可能被意外裁切——这不是 bug，是盒模型按规范执行的结果。
渐变边框的本质是“用背景模拟边框”，它不是真正的边框，所以没法响应 :hover 的边框粗细变化，也没法用 box-shadow 叠加第二层边框效果。这些限制得提前想清楚。
