前端入门-css 线性渐变

科技 07-03 来源：前端石三

上篇整体介绍了css渐变的知识，本篇将着重介绍线性渐变（linear-gradient）。

线性 CSS 渐变 —— linear-gradient

我们在网页设计中最常见的 CSS 渐变类型是 linear-gradient()。之所以称为“线性”，是因为颜色从左到右、从上到下或以您在某个方向上选择的任何角度渐变。

语法：

 background：linear-gradient( [ || ,]? ,  [, ]* } 或
 background-image：linear-gradient( [ || ,]? ,  [, ]* }

参数说明：

：第一个参数表示线性渐变的方向，可用关键字top、left、bottom、right，to top是从上到下、to left是从左到右，如果定义成to left top，那就是从左上角到右下角（to可省略）。
：是角度，单位为deg。

= [ | ]：

：指渐变得起止颜色。
：用长度值指定起止色位置，不允许负值。
：用百分比指定起止色位置。

最基础的渐变：

让我们从最基本的例子开始，一个从上到下的CSS 渐变：

.gradient {
  background-image: linear-gradient(#ff8a00, #e52e71);
}

效果如下：

从上到下的CSS 渐变

上面例子中，我们没有设置角度，默认情况下渐变方向是从上到下，等同于以下的写法：

/* 使用关键字 */
background-image: linear-gradient(to bottom, #ff8a00, #e52e71);

/* 使用角度值*/
background-image: linear-gradient(180deg, #ff8a00, #e52e71);

改变渐变方向：

为了使 CSS 渐变从左到右，我们在函数的第一个参数中使用 to right 关键字表示方向，如下示例：

.gradient {
  background-image:
    linear-gradient(
      to right,
      #ff8a00, #e52e71
    );
}

效果显示：

从左到右

对角渐变：

上面展示了使用to 语法使渐变从左到右，除此之外，我们还可以使用to 语法从一个角到另一个角渐变，如下示例：

.gradient {
  background-image:
    linear-gradient(
      to top right,
      #ff8a00, #e52e71
    );
}

显示效果：

从左下角开始到右上角

上面渐变使用 to top right ，如果使用 to right top 什么效果？结果你会发现一样。

使用角度渐变：

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变，180deg创建一个从上到下的渐变。

使用角度值，能够控制更多的渐变方向，默认角度是180deg。

如下示例，创建一个45度的渐变：

.gradient {
  background-image:
    linear-gradient(
      45deg, 
      #00ff00, #e52e71
    );
}

显示效果：

45度渐变

上面的效果等同于，to top right的效果。

使用多颜色渐变

我们不仅限于两种颜色！事实上，我们可以使用逗号分隔颜色来创建尽可能多的颜色渐变。比如这里有四个颜色：

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      #f06d06, 
      rgb(255, 255, 0), 
      green
    );
}

显示效果：

从左到右有四种颜色

控制颜色的结束位置

css 渐变默认会自动计算每种过渡颜色的位置，我们也可以指定某种颜色的结束位置，如下示例：

.multicolor-linear {
   background: linear-gradient(to right, red 28px, green 77%, blue);
}

上图中所示，从左到右，红色在28px位置结束，绿色从28px开始到77%结束，蓝色从77%开始到100%位置结束。结束位置可以使用任何表示大写的单位值或百分比。

创建实线

在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。如下示例：

.gradient {
    background: linear-gradient(to bottom left, red 50%, blue 50%);
}

改变渐变中心点

默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。

你可以通过设置一个值来将渐变的中心点移动到指定位置。在如下示例中，我们将渐变的中心点由 50% 设为 10%。

/*默认中心点在50%渐变：*/
.default-linear {
  background: linear-gradient(blue, pink);
}
/*中心点在10%渐变：*/
.color-hint {
  background: linear-gradient(blue, 10%, pink);
}

如下效果：

创建色带和条纹

要在渐变中包含一个实心的非过渡颜色区域，请包含颜色起止点的两个位置。

颜色起止点可以有两个位置，这相当于两个连续颜色在不同位置具有相同的颜色起止点。

颜色将在第一个颜色起止点时达到完全饱和，保持该饱和度到第二个颜色起止点，并通过相邻颜色起止点的第一个位置过渡到相邻颜色起止点的颜色。

色带：

.multiposition-stops {
   background: linear-gradient(to left,
       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
}
或
.multiposition-stops {
   background: linear-gradient(to left,
       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
}

条纹：

.multiposition-stop2 {
   background: linear-gradient(to left,
      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
}
或
.multiposition-stop2 {
   background: linear-gradient(to left,
      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
}