css前端切图教程，前端入门css

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

线性 CSS 渐变 —— linear-gradient

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

语法：

background：linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* } 或 background-image：linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* }

参数说明：

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

<stop > = <color> [ <length> | <percentage>]：

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

最基础的渐变：

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

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

效果如下：

css前端切图教程，前端入门css(1)

从上到下的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 ); }

效果显示：

css前端切图教程，前端入门css(2)

从左到右

对角渐变：

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

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

显示效果：

css前端切图教程，前端入门css(3)

从左下角开始到右上角

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

使用角度渐变：

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

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

css前端切图教程，前端入门css(4)

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

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

显示效果：

css前端切图教程，前端入门css(5)

45度渐变

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

使用多颜色渐变

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

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

显示效果：

css前端切图教程，前端入门css(6)

从左到右有四种颜色

控制颜色的结束位置

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

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

css前端切图教程，前端入门css(7)

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

创建实线

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

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

css前端切图教程，前端入门css(8)

改变渐变中心点

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

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

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

如下效果：

css前端切图教程，前端入门css(9)

创建色带和条纹

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

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

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

色带：

.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% ); }

css前端切图教程，前端入门css(10)

条纹：

.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% ); }

css前端切图教程，前端入门css(11)