CSS中如何实现线性渐变效果
本文小编为大家详细介绍“CSS中如何实现线性渐变效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS中如何实现线性渐变效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
linear-gradient
1. 语法
linear-gradient([[to |],]? , [, ...]?)
-webkit-linear-gradient([[|],]? , [, ...]?)
这2种在使用方式和表现形式上都有所不同，使用direction时，前者要带to, 后者不带；使用angle时，表现不一致。
1）默认
二者默认都是从上到下
background-image:linear-gradient(#00ffff,#ff1493,#006699);background-image:-webkit-linear-gradient(#00ffff,#ff1493,#006699)
2）: [left|right]|[top|bottom]的使用
二者表现方向相反
background-image:linear-gradient(toleft,#00ffff,#ff1493,#006699);background-image:-webkit-linear-gradient(left,#00ffff,#ff1493,#006699);
background-image:linear-gradient(tolefttop,#00ffff,#ff1493,#006699);background-image:-webkit-linear-gradient(lefttop,#00ffff,#ff1493,#006699);
3）
度数与方向的对应关系。-webkit-与之对应的方向则为450°-angle
background-image:linear-gradient(275deg,#ff1493,#000000,#006699);background-image:-webkit-linear-gradient(175deg,#ff1493,#000000,#006699);
450°-175°=275°，所以二者表现一致，如下图：
4） = 的使用
stop可使用百分比，也可以使用具体值，表示这种颜色在此位置达到饱和
background-image:linear-gradient(toright,#ff149310%,#00000040%,#00669960%);background-image:-webkit-linear-gradient(toright,#ff149310%,#00000040%,#00669960%);
从上图可以看出颜色变化过程：
0% --> 10%: #ff1493一直处于饱和
10% --> 40%: #ff1493渐变为#000000, 在40%处，#000000达到饱和
40% --> 60%: #000000渐变为#006699, 在60%处，#006699达到饱和
60% --> 100%: #006699一直处于饱和
利用这一特性，可以绘制出条纹
background-image:linear-gradient(toright,#ff149333%,#00000033%,#00000066%,#00669966%);background-image:-webkit-linear-gradient(toright,#ff149333%,#00000033%,#00000066%,#00669966%);
注：stop还可以同时设置2个值， 如linear-gradient(to right, #ff1493 0% 33%, #000000 33% 66%, #006699 66% 100%);-webkit-linear-gradient(to right, #ff1493 33%, #000000 33% 66%, #006699 66% 100%);，效果与上图一致。
若后者的值小于前者，以前者为准，如下20px小于60px，实际按60px显示，效果如下图：
background-image:linear-gradient(right,#ff149360px,#00000020px);background-image:-webkit-linear-gradient(right,#ff149360px,#00000020px);
扩展1：渐变中心
默认是2种颜色的中心，但是我们可以设置其渐变中心
/*3种颜色平分，渐变中心为1/3和2/3处*/background-image:linear-gradient(toright,#ff1493,#000000,#006699);/*渐变中心在10%和20%处*/background-image:linear-gradient(toright,#ff1493,10%,#000000,20%,#006699);
注：-webkit-linear-gradient不支持此用法
扩展2: repeating-linear-gradient
我们可以使用属性这个绘制重复的色块
background-image:repeating-linear-gradient(0deg,#ff1493,#00000010px,#00669920px);background-image:-webkit-repeating-linear-gradient(0deg,#ff1493,#00000010px,#00669920px)
2、常用样式
（1）多色星空
background-image:linear-gradient(45deg,rgba(255,0,76,0.7),rgba(0,0,255,0)80%),linear-gradient(135deg,rgba(106,0,128,1),rgba(0,128,0,0)80%),linear-gradient(225deg,rgba(0,255,255,1),rgba(0,255,255,0)80%),linear-gradient(315deg,rgba(255,192,203,0.7),rgba(255,192,203,0)80%);
同时设置多个值，让整个背景色看起来比较绚丽
（2）格子图案
background-image:repeating-linear-gradient(0deg,rgba(0,255,255,0.3)0px5px,transparent5px10px),repeating-linear-gradient(90deg,rgba(0,255,255,0.3)0px5px,transparent5px10px);background-image:repeating-linear-gradient(45deg,rgba(0,255,255,0.3)0px5px,transparent5px10px),repeating-linear-gradient(135deg,rgba(0,255,255,0.3)0px5px,transparent5px10px);
利用颜色与透明色交替渲染
（3）边框渐变
