css3线性渐变

css3渐变
创建渐变效果，至少需要两种颜色的定义，才能呈现出过渡的渐变效果，渐变分为线性渐变和径向渐变。线性渐变，指的是线条性的多种颜色过渡；径向渐变，则是指由有一个点像四周扩散式渐变。
径向渐变在下一篇中，链接https://blog.csdn.net/qq_43687594/article/details/116661702

线性渐变

  线性渐变，指的是线条性的多种颜色过渡；其中的数值单位可以为px 、% 、deg。
  语法：background-image:linear-gradient(方向，颜色1，颜色2…)

1. 方向
   默认渐变效果方向是从上到下，即to bottom。但是除了该方向之外，同样也可以设置方向为to top/right/left/bottom/ right top /right bottom /left top /left bottom。注意，线性渐变不能使用二维
   例如：background-image: linear-gradient(to right top,red 10%,yellow 50%,blue 90%);
   表示在元素内，由左下角至右上角，起点为红色，红色到黄色从元素10%开始，过渡到50%的渐变，再从元素50%处，由黄色到蓝色渐变至元素90%处，剩余元素的10%空余处，则是全部填充最后一个颜色。
   除了使用方位值之外，还可以使用度数。角度指的是水平线和渐变线之间的角度，0deg（即0°）表示自下而上的渐变，90deg（即90°）表示从左到右的渐变。
   但是现在依旧有很多浏览器，使用的是旧版本的deg，即0deg表示自左向右渐变，而90deg表示自下而上的渐变。
   

2. 重复交替 repeating-linear-gradient
   语法：background-image: repeating-linear-gradient(to top right,red 50px,yellow 100px,blue 150px);
   表示在元素内，从红色到蓝色的渐变效果，重复交替显示。这样就不会使得，最后一种颜色全部占据剩余空白区域。
   

3. 透明度
   CSS3 渐变也支持透明度（transparent），可用于显示效果减弱变淡。也就是使用rgba颜色，除了三个颜色数值之外，最后一个参数是定义透明度的，从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
   例如： background-image: linear-gradient(rgb(201, 60, 60,1),rgba(127, 26, 221, 0.2) );