linear-grident的属性和使用

css3新增Gradient属性，用来增长渐变的效果，渐变分为线性渐变 linear-grident 和 径向渐变 radial-grident，这篇文章主要介绍线性渐变linear-grident 。

linear-grident语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

1. direction表示渐变方向，取值有 to top, to bottom, to left, to right, to top left, to top right, to bottom left, to bottom right等，分别表示从下到上，从上到下，从左到右。。。等等

除了能够用top,bottom表示方向外，还能够用角度来表示。

若没有角度，只有颜色的渐变时，默认从上到下渐变，以下所示：

background: linear-gradient(red,orange,yellow,green,blue,indigo,violet);

效果以下：

加上角度时，0deg表示从下到上，90deg表示从左到右，按照顺时针的方式，以此类推，以下图所示：

linear-grident须要根据不一样的浏览器加上浏览器前缀，通常咱们在加浏览器前缀时直接加便可，好比-webkit，-moz，-o等，

可是linear-grident不能直接在前面加浏览器前缀，由于不少浏览器(Chrome,Safari,fiefox等)使用了旧的标准，

即 0deg 将建立一个从左到右的渐变，90deg 将建立一个从下到上的渐变。换算公式 90 - x = y其中 x 为标准角度，y为非标准角度。

下面是我列出的标准写法与各浏览器的区别：

	linear-grident	-webkit-linear-grident
0deg	从下到上（to top）	从左到右（left）
90deg	从左到右（to right）	从下到上（bottom）
180deg	从上到下（to bottom）	从右到左（right）
270deg	从右到左（to left）	从上到下（top）

 

 

 

 

-moz和-o等和-webkit前缀同样，在这里就不列出了。

因此在加浏览器前缀时必定要匹配好样式，一不当心就会出错哦

2. color-step1 表示渐变的起始颜色，color-step2表示终止的渐变颜色，固然颜色能够有不少，不限于两个，以下所示：

background-image:linear-gradient(to left, #32c7b1,#89f389,yellow);   //  表示从右到左渐变颜色分别为#32c7b1 #89f389 yellow

效果以下：

颜色后面还能够加参数，好比20%，50%，也能够写固定的大小，好比20px，50px，百分比或固定大小是指某个颜色值距离起点的开始位置 。

默认的渐变方式为从上往下，因此当某个颜色值设置了百分比后，便会从距离顶端相关的距离（百分比计算）开始填充实色。而渐变色会在顶部与尾部的中间填充。

好比在不设置百分比时：

background-image:linear-gradient(to bottom,red,yellow);  

上图看不出默认百分比是多少，再加上以下百分比试试：

background-image:linear-gradient(to bottom,red 0%,yellow 100%); 

效果如图：

能够看出该图和上图是同样的，因此若是咱们不设置百分比的话，默认是根据颜色的个数来给每一个颜色值设置的，

最后一个颜色的百分比值就是100%，而起始的值就是0%，中间若是再有多个颜色值，则根据100/（个数-1）平均下去。

示例代码：

.demo{ background-image:linear-gradient(red,orange,yellow,green,blue,indigo,violet);          
} .demo1{ background-image:linear-gradient(red,orange 16.67%,yellow 33.33%,green 50%,blue 66.67%,indigo 83.33%,violet 100%);           
}

能够看出这两句代码的效果是同样的

下面看看百分比是如何工做的：

当百分比都设置为0时：

background-image:linear-gradient(red 0%,orange 0%);

能够看出上图中并无渐变的效果，也就是说橘色从0%的位置开始渲染实体颜色，把红色给覆盖掉了

当后面颜色设置百分比时：

background-image:linear-gradient(red 0%,orange 20%);

能够看出橘色从距离顶端20%的位置开始渲染

再设置为一个50%的

background-image:linear-gradient(red 0%,orange 50%); 

红色从顶端开始渲染，而橘色是从50%的位置开始渲染实体颜色，在50%以前的位置是渐变的颜色

当第一个颜色也加上百分比时：

background-image:linear-gradient(red 20%,orange 50%); 

与前一张截图对比发现，前20%的位置都是红色的实体颜色，在50%之后都是橘色的实体颜色，只有在20%—50%之间才是渐变色

相似的，再换个百分比：

background-image:linear-gradient(red 50%,orange 80%); 

能够看出前50%是红色的实体颜色，80%之后是橘色的实体颜色，50%—80%之间是红色到橘色的渐变颜色

由此能够得出结论：渐变过渡区的占比为总的空间（高度或宽度）减去上下两个着色块空间占比剩下的空间。

那么，若是前面的颜色百分比大于后面颜色的百分比呢？

background-image:linear-gradient(red 50%,orange 40%);

能够看出红色和橘色都是50%，且没有过渡区。

下面摘抄于原文：若是某个色标的位置值比整个列表中在它以前的色标的位置值都要小，则该色标的位置值会被设置为它前面全部色标位置值的最大值。

也就是说橘色虽然被设置为40%，可是和前面的红色位置同样都是50%，此时前50%是红色的实体颜色，后50%是橘色的实体颜色，便没有了过渡区。

3. 渐变重复的效果 repeating-linear-gradient() 

background-image:repeating-linear-gradient(red 10%,orange 20%); 

重复渐变的属性在各个浏览器下的语法是同样的，直接在前面加上浏览器前缀便可，这个就不用担忧啦

4. 若是想作出重复的线条式的背景，能够加上background-size属性，以下所示：

.demo{ background-image: linear-gradient(90deg,orange 50%,red 50%); background-size: 53px;         
}

效果如图：

若是想作出随机线条的背景，即可以多写几个重复的线条，而后叠加起来，以下所示：

.demo{ width: 400px; height: 300px; background-color: #026873; background-image: linear-gradient(90deg,rgba(255,255,255,.07) 50%, transparent 50%), linear-gradient(90deg,rgba(255,255,255,.17) 50%, transparent 50%), linear-gradient(90deg,rgba(255,255,255,.13) 50%, transparent 50%), linear-gradient(90deg,rgba(255,255,255,.19) 50%, transparent 50%); margin: 40px; background-size: 13px,29px,37px,53px;         
}    

效果以下所示：

 参考连接：http://www.jianshu.com/p/bf862535dd30

               http://www.zhangxinxu.com/wordpress/2017/02/cicada-principle-css3-randomisation-multiple-backgrounds-border-radius/