使用linear-gradient实现颜色线性渐变

语法结构

linear-gradient([方向], 颜色1, 颜色2, ...);

参数解析

1. 方向：可选参数。如果不指定，默认方向是从上到下（即to bottom）。方向参数可以是以下几种形式：

• 角度值：使用度数（如45deg、135deg等）来指定渐变方向。0deg 表示从下向上，角度值按顺时针方向增加。
• 关键字组合：使用to top、to bottom、to left、to right以及它们的组合（如to top left、to bottom right等）来指定渐变方向。

● to bottom：从上到下渐变。
● to top：从下到上渐变。
● to right：从左到右渐变。
● to left：从右到左渐变。
● to top left：从右下角到左上角的渐变。
● to top right：从左下角到右上角的渐变。
● to bottom left：从右上角到左下角的渐变。
● to bottom right：从左上角到右下角的渐变。
● 45deg：使用角度指定的渐变（45度角，从左下到右上）。
● 0deg：同于to top，从底部向上。
● 135deg：从右上角到左下角的对角线渐变。

2. 颜色数量没有严格限制，但最少需要2个颜色。常见配置如下：

//2个颜色，从红到蓝的渐变
background: linear-gradient(to right, red, blue);
//3个颜色，从红色到黄色再到蓝色的渐变，中间颜色（黄色）会自然过渡。3个以上颜色同理
background: linear-gradient(to right, red, blue);

另外每个颜色是可以带百分比的，可以通过百分比或长度指定每个颜色的位置。如果省略位置值，颜色将均匀分布。

background: linear-gradient(
  to right,
  red 0%,      /* 红色从起点开始 */
  orange 25%,  /* 橙色从25%位置开始 */
  yellow 50%,  /* 黄色从50%位置开始 */
  green 75%,   /* 绿色从75%位置开始 */
  blue 100%    /* 蓝色到终点结束 */
);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

注意事项

1. linear-gradient支持多层叠加，通过逗号分隔多个渐变，这样可以创建复杂的复合背景效果。

background: 
  /* 第一层：对角渐变（上层） */
  linear-gradient(135deg, rgba(255,0,0,0.3) 0%, transparent 70%),
  /* 第二层：垂直渐变（中层） */
  linear-gradient(to bottom, rgba(0,255,0,0.2) 0%, transparent 50%),
  /* 第三层：径向渐变（下层） */
  radial-gradient(circle, rgba(0,0,255,0.1) 0%, transparent 70%),
  /* 底层背景色 */
  #f0f0f0;

• 第一层（对角渐变）：红色半透明渐变从左上角到右下角。
• 第二层（垂直渐变）：绿色半透明渐变从顶部向下。
• 第三层（径向渐变）：蓝色半透明圆形渐变从中心扩散。
• 底层：灰色背景色。

代码应用

在实际开发中，可能有些页面需要有这种线性渐变色效果，这里推荐一个配色网站：https://colordrop.io/，可以选择需要的渐变色，点击进去，然后复制颜色代码。

例如

垂直渐变（第一层）：
● 方向：从上到下（to bottom）。
● 起始颜色：透明（transparent）。
● 结束颜色：白色（#fff），渐变结束位置在距离顶部 400rpx 处。
● 效果：从顶部的透明过渡到底部的白色，渐变范围为 400rpx。

水平渐变（第二层）：
● 方向：从左到右（to right）。
● 起始颜色：浅薄荷绿（#beecd8），从左侧开始，占 20% 的宽度。
● 结束颜色：淡粉色（#F4E2D8），从 20% 宽度处开始过渡到右侧。
● 效果：左侧 20% 为固定的薄荷绿色，然后过渡到淡粉色。

background: linear-gradient(to bottom,transparent,#fff 400rpx),
	          linear-gradient(to right,#beecd8 20%,#F4E2D8);