1. 线性渐变的基础语法
1. 方向与角度
在 CSS 中，线性渐变由方向和颜色停靠点组成，语法形式通常为 linear-gradient(方向, 颜色1, 颜色2, ...) 。通过控制方向，可以让渐变从左到右、从上到下，甚至以任意角度延展。
常用的方向关键字包括 to left、to right、to bottom、to top，也可以使用角度 deg 来精确设定，如 linear-gradient(45deg, red, blue)。
/* 水平方向渐变（从左到右） */
background: linear-gradient(to right, #ff7e5f, #feb47b);/* 斜向渐变（45度） */
background: linear-gradient(45deg, #ff7e5f, #feb47b);
2. 颜色停靠点的顺序与位置
颜色停靠点定义了每个颜色在渐变轴上的具体位置。先后顺序决定了颜色的分布，没有指定的节点时，浏览器会等距分布。为获得更可控的渐变，可以显式给出停靠点 color-stop，如 color-stop(50%, #fff)。
示例中，颜色从起点逐步过渡到中点再到终点，停靠点的百分比（或长度）决定了颜色切换的锐度。
/* 双色中点对齐，精确控制颜色分布 */
background: linear-gradient(to bottom, rgba(255,0,0,0.8) 0%, rgba(255,0,0,0.8) 50%, rgba(0,0,255,0.8) 100%);
3. 透明度与混合效果
使用 RGBA/HSLA 颜色值可以在渐变中实现透明度效果，使底层内容透射出来。透明度在渐变中过渡自然，能营造层叠感和深度。
也可以直接给颜色写入 alpha 通道，例如 rgba(0,0,0,0.5)。
/* 不同颜色带有透明度的渐变 */
background: linear-gradient(to right, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.9) 100%);
2. 渐变的风格与应用
1. 线性渐变的常见风格
线性渐变可以表现为扁平风、金属感、光影效果等。通过叠加颜色与透明度，营造层次感，使按钮、卡片背景有质感。
为了让渐变更易控，建议限制颜色数目在两到三种，避免过度干扰文本的可读性。
/* 常见的扁平渐变应用于按钮背景 */
button {background: linear-gradient(to bottom right, #34e, #9af 60%, #fff);color: #fff;
}
2. 复杂渐变的叠加技巧
通过组合多个渐变，可以实现多层次的背景效果，例如将一个渐变叠在另一个渐变之上，或者与渐变背景图片混合。这里要注意层级顺序和浏览器渲染性能。
常见做法是将渐变放在背景的第一层，随后是图片或纹理层，最后再叠加一个半透明的色彩层。
/* 多背景叠加示例：渐变 + 图像 + 半透明遮罩 */
background-image:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.0)),url('/images/banner.jpg');
background-size: cover;
background-blend-mode: multiply;
3. 实战技巧与优化
1. 兼容性与前缀的取舍
现代浏览器对 linear-gradient 的支持非常好，常见的兼容性问题来自早期浏览器或旧前缀。为确保更广的兼容性，可以在少量场景中保留 -webkit-linear-gradient 的写法，尤其在旧 Android 浏览器中。
不过在大多数现代项目中，可以优先使用标准语法，避免过度冗余的前缀，以提升维护性。
/* 兼容性备选方案（旧浏览器） */
background: -webkit-linear-gradient(left, #f06, #4a90e2);
background: linear-gradient(to right, #f06, #4a90e2);
2. 彩色渐变的可访问性
在设计中，对比度和文本可读性很重要。确保文本在渐变背景上仍然清晰，例如给有色背景加一个浅色文本或添加背景遮罩。
对于不同主题，建议提供一个可切换的“深色/浅色”渐变版本，以提升可用性。
/* 给渐变背景加一个半透明遮罩以提升可读性 */
.banner {background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5));
}
4. 视觉调试与性能考量
1. 使用开发者工具可视化渐变
在浏览器的开发者工具中，可以直接查看渐变的颜色停靠点和方向，直观看到渐变的分布，帮助快速定位问题。
把常用的渐变样式记录为变量或混合宏，可以提高开发效率并便于维护。
/* CSS 变量管理渐变风格 */
:root {--btn-gradient: linear-gradient(to right, #4facfe, #00f2fe);
}
.button {background: var(--btn-gradient);
}
