必须用 background-image 设置渐变，因 linear-gradient() 本质是图像；避免用 background 简写以防重置其他背景属性；推荐 to 关键词定义方向；悬停动画宜用 background-position 配合 background-size 实现；IE9 及以下需提供 background-color 回退。
直接用 background-image 配合 linear-gradient()
CSS 渐变背景本质就是一种图像，所以必须走 background-image，不能写在 background-color 里。写成 background: linear-gradient(...) 看似简洁，其实是 background 这个复合属性的简写，它会**重置所有 background 子属性**（比如 background-position、background-size），容易意外清掉你之前设好的背景图或定位。
稳妥做法是显式声明：
button {
background-image: linear-gradient(135deg, #ff6b6b, #4ecdc4);
background-color: #ff6b6b; /* fallback for old browsers */
}
linear-gradient() 的方向参数别硬背，用角度或关键词更可靠
很多人卡在第一个参数怎么写：是 to top 还是 to bottom？其实浏览器按“渐变起始色从哪来、往哪去”理解。比如 to bottom 表示起始色在顶部，结束色在底部——这和直觉一致；但 180deg 也等价于 to bottom，因为 0deg 是向右，90deg 向下，180deg 就是向下到底部。
-
to right≡90deg -
to bottom≡180deg -
to left≡270deg -
to top≡0deg或360deg
建议优先用 to xxx 关键词，语义清晰，不易出错；调试时再换角度微调。
按钮悬停时改渐变方向或颜色，别忘了加 transition
只写 :hover 改 background-image 不会平滑过渡——CSS 不支持渐变图像的插值动画。得靠 background-position 移动、或切换预定义的几种渐变，再用 transition 控制变化节奏。
常用技巧是固定渐变尺寸 + 移动位置：
button {
background-image: linear-gradient(90deg, #ff6b6b, #4ecdc4, #4ecdc4, #ff6b6b);
background-size: 200% 200%;
transition: background-position 0.3s ease;
}
button:hover {
background-position: 100% 100%;
}
这样能做出“色带扫过”的效果。如果真要切换不同角度的渐变，只能用 @keyframes 配合 animation，但兼容性和性能不如 position 方案。
IE 旧版本不支持 linear-gradient()，fallback 要具体到颜色
IE10+ 支持无前缀 linear-gradient()，但 IE9 及更早必须用 -ms-filter（已废弃）或纯色降级。别写成 background: #ccc; background: linear-gradient(...) —— 后者在 IE9 会被整行忽略，按钮就变成透明。
正确 fallback 写法：
button {
background-color: #ff6b6b; /* IE9 及以下看到这个 */
background-image: linear-gradient(135deg, #ff6b6b, #4ecdc4); /* IE10+/现代浏览器覆盖 */
}
注意：不要依赖 filter: progid:DXImageTransform.Microsoft.gradient(...)，它在 IE10+ 已被禁用，且语法反直觉，维护成本高。
渐变本身简单，但和按钮交互、降级、动画组合时，最容易漏掉 background-size / background-position 的配合，或者误以为 background 简写是安全的。动手前先想清楚：要不要动效？支不支持老浏览器？要不要叠加其他背景？这几个问题定了，写法自然就收敛了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
