button 的 border 不能直接用 linear-gradient，因 CSS border 不支持渐变色；可行方案为 background-image 模拟、::before 伪元素绘制或 SVG border-image，推荐前两者。
button 的 border 不能直接用 linear-gradient
CSS 的 border 属性不支持渐变色，写成 border: 2px solid linear-gradient(to right, #ff6b6b, #4ecdc4) 会完全失效，浏览器直接忽略整条声明。这是初学者最常卡住的地方——误以为 border 和 background 一样能塞函数。
真正可行的方案只有三个：用 background-image 模拟描边、用伪元素 ::before 绘制环形渐变框、或用 SVG 作为 border-image 源。其中前两种更轻量、兼容性好，推荐优先尝试。
用 background-image 实现渐变描边（兼容性最佳）
核心思路是把渐变当“图片”铺在按钮边缘，靠 background-size 和 background-position 控制只显示边框区域。
-
background-image: linear-gradient(...)写成单向条纹，比如linear-gradient(to right, #ff6b6b, #4ecdc4) -
background-size设为按钮宽高比例的倍数，例如200% 200%，确保渐变能覆盖四边 -
background-position分四次偏移，分别对应上、右、下、左四边，配合background-clip: padding-box避免盖住文字 - 必须设
padding留出描边空间，比如padding: 12px 24px，否则渐变会压文字
示例片段：
立即学习“前端免费学习笔记（深入）”；
button {
padding: 12px 24px;
background-image:
linear-gradient(to right, #ff6b6b, #4ecdc4),
linear-gradient(to right, #ff6b6b, #4ecdc4),
linear-gradient(to bottom, #ff6b6b, #4ecdc4),
linear-gradient(to bottom, #ff6b6b, #4ecdc4);
background-size: 200% 4px, 4px 200%, 200% 4px, 4px 200%;
background-position: 0 0, 100% 0, 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: padding-box;
}
用 ::before 伪元素画渐变边框（控制最精准）
比 background-image 更灵活，能做圆角描边、hover 动画、甚至不规则路径。关键点在于伪元素必须和按钮同尺寸、居中叠加，并用 border-radius 同步主元素。
- 按钮设
position: relative，让伪元素能绝对定位 -
::before设content: ""、position: absolute、inset: -2px（假设描边宽 2px） -
background: linear-gradient(45deg, #ff6b6b, #4ecdc4)，再加border-radius: 4px（与按钮一致） - 务必加
pointer-events: none，否则会拦截点击
hover 放大时，只对主按钮加 transform: scale(1.05)，伪元素不动，避免描边错位。
移动端 touch 下描边按钮的交互陷阱
iOS Safari 和部分安卓浏览器里，:hover 在真机点按几乎不触发，导致渐变描边 hover 效果消失。这不是 bug，是规范行为。
- 必须同时定义
:active状态，用transform: scale(0.98)或opacity: 0.9做按下反馈 - 不要依赖
transition: all，只过渡transform和opacity，否则 touchstart/touchend 切换卡顿 - 如果设计师要求“描边随手指滑动流动”，得改用
canvas或 SVG + JavaScript 监听touchmove，纯 CSS 做不到
渐变描边真正的难点不在写法，而在描边宽度、圆角半径、缩放比例三者之间的像素级对齐——差 1px 就会露白边或压字，调试时建议打开 DevTools 的“层叠渲染”模式逐层检查。
