應用視覺設計——CSS實現線性漸變效果

在freeCodeCamp中應用視覺設計的課程中，介紹了一種經過使用CSS屬性實現線性漸變效果。

1.線性漸變：

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

       "gradient-direction"參數：指定了顏色轉換開始的方向，使用度數表示，（ag:45deg）;

        後續的顏色：指定了使用的顏色順序；

        舉個栗子：

        

 1 <style>
 2 
 3  div{ 
 4  border-radius: 20px;
 5  width: 70%;
 6  height: 400px;
 7  margin: 50px auto;
 8  background:linear-gradient(35deg,#CCFFFF,#FFCCCC);
 9   }
10 
11 </style>
12 
13 <div></div>

效果是這樣的：

將漸變角度改爲90deg時的效果是這樣的：（垂直漸變）

2.使用CSS線性漸變建立條紋元素：

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

       "gradient-direction"參數：指定了顏色轉換開始的方向，使用度數表示，（ag:45deg）;

        後續的顏色：指定了使用的顏色順序；

        像素/百分比值：相似寬度，標記了發生轉換的位置

   舉個栗子：

 1 <style>
 2 
 3  div{ 
 4  border-radius: 20px;
 5  width: 70%;
 6  height: 400px;
 7  margin: 50 auto;
 8  background: repeating-linear-gradient(  9  90deg, 10  yellow 0px, 11  blue 40px, 12  green 40px, 13  red 80px 14  );
15   }
16 </style>
17 
18 <div></div>

效果是這樣的：

在這個例子中，漸變從0像素處的黃色開始，而後在距離開始40像素處混合爲第二種顏色藍色。因爲下一個顏色中止也是在40像素，梯度當即改變；

將轉換梯度換一個值（45deg）或許更明顯,更換後的效果是這樣的：

   注：若是每兩個顏色中止值都是相同的顏色，那麼混合就不明顯了，由於它位於相同的顏色之間，而後很難過渡到下一個顏色，因此最後獲得的是條紋。

      舉個栗子：

              

 1 <style>
 2 
 3  div{ 
 4  border-radius: 20px;
 5  width: 70%;
 6  height: 400px;
 7  margin: 50 auto;
 8  background: repeating-linear-gradient(  9  45deg, 10  yellow 0px, 11  yellow 40px, 12  black 40px, 13  black 80px 14  );
15   }
16 </style>
17 
18 <div></div>

效果就變成了黃黑條紋啦（以下圖）

    以上。