CSS-线性渐变

渐变分为线性渐变和径向渐变。本文只讲线性渐变。

线性渐变：变化根据一条线进行变化。

径向渐变：由一个点向外进行渐变。

1.写法

background: linear-gradient(color1,color2); 

渐变方向默认从上到下

   

2.改变渐变方向

1）通过设置渐变终点

background: linear-gradient(direction,colro1,color2);

其中，direction即为设置渐变终点。（to ....)

【从左到右，就将direction写成to right】

    

【左下角到右上角，将direction写成to right top】(看图可以看出是从左下角到右上角，并不是按照45度的线性进行变化）

   

2）通过设置渐变线起始角度

background: linear-gradient(angle,color1,color2);

其中，angle即为角度。是以六点为起始，进行顺时针计算确定渐变的起始位置。

【左上角十点半，135度】

  

【170度】

  

• 可以看出，当设置角度后，无论正方形的盒子，还是长方形的，渐变的角度是一样的。也就是说，通过角度设置渐变的，一个是设置了起始点的位置，再一个是设置了渐变线的角度。

3.可设置多个颜色

background: linear-gradient(color1,color2,color3,color4....);

身为一个专业的美工，怎能不做一个好看的渐变？

    

4.设置颜色起始位置

通过设置颜色的起始位置，可以设置颜色占比，也可以设置渐变重复，还可以设置渐变起始点。

background: linear-gradient(color1 length/percentage,color2 length/percentage,color3 length/percentage);

1）length/percentage 都是颜色起止位置，length表示长度，percentage表示百分比

需要说明一下的是，渐变，每个颜色的起止位置为一个固定的点，而不是一段距离。因为，只有在那个固定的点的位置才是最纯正的该颜色，而无论向两侧任何方向变化，都不再是最纯的颜色了。当未设置颜色起止点时，即为均匀渐变，即第一个颜色起始位置为0%,第二个颜色的起止位置为50%，第三个为100%。

【均匀渐变，第二个颜色起始位置在中间】

     

【将第二个颜色起始位置进行改变】

2）设置颜色渐变重复

第一个和第二个盒子的区别在于一个用了百分比，一个用了长度。

第一、二个和第三个的区别在于，第三个前面使用了repeating-linear-gradient();

所以，当第一个和第二个盒子达到第三个颜色的结束位置时，剩下的空间都时第三个颜色。而box3，因为有了repeating，当第三个颜色结束时，剩下的地方会重新渐变。

5.渐变透明

使用 rgba() 函数来定义颜色

rbga(x,y,z,k) 其中，x,y,z三个数分别取值0-255。k取值0-1，0表示透明，1表示不透明。