应用视觉设计——CSS实现线性渐变效果

在freeCodeCamp中应用视觉设计的课程中，介绍了一种通过使用CSS属性实现线性渐变效果。

1.线性渐变：

background:linear-gredient(gradient-direction,color1,color2,color3,...)

"gradient-direction"参数：指定了颜色转换开始的方向，使用度数表示，（ag:45deg）;

后续的颜色：指定了使用的颜色顺序；

举个栗子：

 <style>

   div{

     border-radius: 20px;

     width: 70%;

     height: 400px;

     margin: 50px auto;

     background:linear-gradient(35deg,#CCFFFF,#FFCCCC);

   }

 </style>

 <div></div>

效果是这样的：

将渐变角度改成90deg时的效果是这样的：（垂直渐变）

2.使用CSS线性渐变创建条纹元素：

background:repeating-linear-geadient(gradient-direction,color1  像素/百分比，color2  像素/百分比，...);

"gradient-direction"参数：指定了颜色转换开始的方向，使用度数表示，（ag:45deg）;

后续的颜色：指定了使用的颜色顺序；

像素/百分比值：类似宽度，标记了发生转换的位置

举个栗子：

 <style>

   div{

     border-radius: 20px;

     width: 70%;

     height: 400px;

     margin:  50 auto;

     background: repeating-linear-gradient(

       90deg,

       yellow 0px,

       blue 40px,

       green 40px,

       red 80px

     );

   }

 </style>

 <div></div>

效果是这样的：

在这个例子中，渐变从0像素处的黄色开始，然后在距离开始40像素处混合为第二种颜色蓝色。由于下一个颜色停止也是在40像素，梯度立即改变；

将转换梯度换一个值（45deg）或许更明显,更换后的效果是这样的：

注：如果每两个颜色停止值都是相同的颜色，那么混合就不明显了，因为它位于相同的颜色之间，然后很难过渡到下一个颜色，所以最后得到的是条纹。

举个栗子：

 <style>

   div{

     border-radius: 20px;

     width: 70%;

     height: 400px;

     margin:  50 auto;

     background: repeating-linear-gradient(

       45deg,

       yellow 0px,

       yellow 40px,

       black 40px,

       black 80px

     );

   }

 </style>

 <div></div>

效果就变成了黄黑条纹啦（如下图）

以上。