linear-gradient 浅析CSS中怎么实现线性渐变 _生活百科

CSS中怎么实现线性渐变？下面本篇文章给大家介绍一下CSS线性渐变函数linear-gradient()的使用方法，并聊聊线性渐变的多种应用，希望对大家有所帮助！

文章插图

linear-gradient1. 语法
linear-gradient([[to <direction>|<angle>],]? <color stop?>, <color stop?>[, ...]?)
-webkit-linear-gradient([[<direction>|<angle>],]? <color stop?>, <color stop?>[, ...]?)
这2种在使用方式和表现形式上都有所不同，使用direction时，前者要带to, 后者不带；使用angle时，表现不一致。【推荐学习：css视频教程】
1）默认
二者默认都是从上到下
background-image:linear-gradient(#00ffff, #ff1493, #006699);background-image:-webkit-linear-gradient(#00ffff, #ff1493, #006699)

文章插图

2）<direction>: [left|right]|[top|bottom]的使用
二者表现方向相反
background-image:linear-gradient(to left, #00ffff, #ff1493, #006699);background-image:-webkit-linear-gradient(left, #00ffff, #ff1493, #006699);

文章插图

background-image:linear-gradient(to left top, #00ffff, #ff1493, #006699);background-image:-webkit-linear-gradient(left top, #00ffff, #ff1493, #006699);

文章插图

3）<angle>的使用
度数与方向的对应关系。 -webkit-与之对应的方向则为450°-angle

文章插图

background-image:linear-gradient(275deg, #ff1493, #000000, #006699);background-image:-webkit-linear-gradient(175deg, #ff1493, #000000, #006699);450°-175°=275°，所以二者表现一致，如下图：

文章插图

4）<color stop> = <color [percentage|length]>的使用
stop可使用百分比，也可以使用具体值，表示这种颜色在此位置达到饱和
background-image:linear-gradient(to right, #ff1493 10%, #000000 40%, #006699 60%);background-image:-webkit-linear-gradient(to right, #ff1493 10%, #000000 40%, #006699 60%);

文章插图

从上图可以看出颜色变化过程：
0% --> 10%: #ff1493一直处于饱和
10% --> 40%: #ff1493渐变为#000000, 在40%处， #000000达到饱和
40% --> 60%: #000000渐变为#006699, 在60%处， #006699达到饱和
60% --> 100%: #006699一直处于饱和
利用这一特性，可以绘制出条纹
background-image:linear-gradient(to right, #ff1493 33%, #000000 33%, #000000 66%, #006699 66%); background-image:-webkit-linear-gradient(to right, #ff1493 33%, #000000 33%, #000000 66%, #006699 66%);【linear-gradient 浅析CSS中怎么实现线性渐变】