纯css无法用border-color实现渐变边框，因只支持单色；border-image是唯一原生方案，但需显式设置border-width、非none的border-style及slice参数；background-clip+padding-box和伪元素是兼容性更好、控制更强的替代方案。
纯 CSS 无法用 border-color 实现渐变边框——它只接受单色值，写 linear-gradient() 会直接失效。
为什么 border-image 是唯一原生方案？
border-image 是 CSS 中唯一能真正把渐变“当边框用”的属性，但它有硬性前提：
-
border-width必须显式设置（比如3px），否则没渲染区域 -
border-style不能是none或hidden，必须是solid、dashed等可绘制样式 -
border-image值末尾的slice参数不能省，设为1最安全（防裁切）
常见错误：写了 border-image: linear-gradient(...) 却没配 border: 2px solid，结果完全没效果。
示例有效写法：
button {
border: 2px solid;
border-image: linear-gradient(90deg, #3b82f6, #8b5cf6) 1;
}
background + padding-box 是最稳的兼容方案
放弃 border，改用背景“画”出边框，本质是视觉模拟，但好处是：支持任意渐变语法、圆角天然生效、IE10+ 全兼容。
核心是三件套：border: 2px solid transparent 占位 + padding: 2px 挤出边框空间 + background-clip: padding-box 把渐变锁在边框区。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
注意点：
-
padding值必须和透明边框宽度一致，否则错位 -
background-clip: padding-box缺一不可，漏了渐变会铺满整个元素 - 如果按钮有内边距（
padding），记得额外加一层padding来补偿边框厚度
简写示例：
button {
border: 2px solid transparent;
padding: 12px 24px;
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
background-clip: padding-box;
border-radius: 6px;
}
伪元素方案适合需要 hover 动画的按钮
用 ::before 绘制一层带渐变的矩形，再靠 mask 或 clip-path 只留边框区域。这是目前控制力最强、动画最灵活的方式。
关键细节：
- 父容器必须设
position: relative，否则::before无法精确定位 -
overflow: hidden要加在父容器上，防止伪元素内容溢出（尤其圆角场景） - Chrome/Safari 和 Firefox 对
mask-composite的实现不一致，必须同时写两行：-webkit-mask-composite: xor和mask-composite: exclude -
pointer-events: none别漏，否则伪元素会挡住点击
基础结构示例：
button {
position: relative;
overflow: hidden;
}
button::before {
content: '';
position: absolute;
inset: 0;
padding: 2px;
border-radius: inherit;
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
真正难的不是写出来，而是选对方案：要原生语义且元素简单，用 border-image；要兼容性+圆角+静态效果，用 background-clip；要 hover 流动、缩放或描边动画，必须上伪元素。三者底层逻辑完全不同，混用容易互相覆盖或失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
