background-image: linear-gradient() 是唯一可靠写法，所有渐变必须通过 background-image 实现，不可用 background-color 或简写 background；方向统一用 to 前缀（如 to right），多色需显式标注位置（0%、40%等），叠加图片时须配合 background-blend-mode 控制混合效果。
background-image: linear-gradient() 是唯一可靠写法
CSS 里没有 background-gradient 这种属性，所有渐变都必须走 background-image，哪怕只用一个颜色过渡。浏览器不认 background: linear-gradient(...) 这种简写——它会被当成无效值静默丢弃。
常见错误是把渐变当颜色写进 background-color，结果页面一片空白或回退到默认色。正确写法必须带 background-image，且优先级高于 background-color（后者仅作降级兜底）：
button {
background-color: #ccc; /* 降级色，无渐变时显示 */
background-image: linear-gradient(to right, #ff6b6b, #4ecdc4);
}方向参数别硬记“top”“left”，用 to + 方向更稳
linear-gradient() 的第一个参数决定渐变轴线走向。用 to top 比 0deg 更直观，也比 top（旧语法，已废弃）更兼容。现代写法统一用 to 前缀：
-
to bottom：上→下（等价于180deg） -
to right：左→右（等价于90deg） -
to bottom right：左上→右下（对角线）
避免混用角度和方向词，比如 linear-gradient(45deg, ...) 在部分旧版 Safari 中表现异常；to 写法在 Chrome/Firefox/Safari/Edge 全系稳定。
立即学习“前端免费学习笔记（深入）”；
多色停靠点要显式标位置，否则浏览器自动均分
写 linear-gradient(red, yellow, green) 看似简单，但浏览器会把三色按 0%、50%、100% 均匀分布，中间黄色区域过窄。想控制视觉权重，必须手动加位置：
background-image: linear-gradient( to right, #2c3e50 0%, #3498db 40%, #1abc9c 70%, #9b59b6 100% );
注意：0% 和 100% 不可省略，否则首尾色可能被裁切；百分比之间不要留空隙，否则出现意外透明带。
渐变叠加图片或纹理时，background-blend-mode 很关键
想让渐变和背景图共存（比如半透明白色渐变盖在照片上），不能只写两个 background-image——得靠混合模式。直接叠加会遮住图片：
section {
background-image:
linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0)),
url(hero.jpg);
background-blend-mode: overlay; /* 或 soft-light / multiply */
}没加 background-blend-mode 时，第二层图片会被第一层渐变完全覆盖；设成 overlay 后，渐变只影响明暗，保留原图细节。这个属性在 iOS Safari 13+ 和安卓 Chrome 80+ 才稳定支持，老版本需降级为单层渐变+opacity 容器。
渐变本身没状态、不重绘，但滥用多层 background-image + background-blend-mode 在低端 Android 设备上容易触发渲染卡顿，上线前最好真机测一测滚动帧率。
