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 渐变
上面例子中，我们没有设置角度，默认情况下渐变方向是从上到下，等同于以下的写法：
/* 使用关键字 */
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% );
}
到此已经介绍了线性渐变的使用方法，下面将会继续介绍其它渐变的使用方法，你可以关注我，继续学习其它渐变知识。
其它相关文章：
- css 线性渐变
- css 径向渐变
- css 圆锥渐变
- css 重复渐变
参考资料：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients
https://css-tricks.com/a-complete-guide-to-css-gradients/
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
