我們在開發的過程中經常會遇到背景色是漸變的背景色，一般可以製作背景圖，如果僅僅是簡單的線性變換的背景，今天我就遇到了，其實完全可以用CSS3的漸變來實現這個效果。這個過程由瀏覽器來生成，不用去載入靜態的資源，提高效能。

漸變有兩種：

• 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
• 徑向漸變（Radial Gradients）- 由它們的中心定義

線性漸變也是比較常見的漸變方式

為了建立一個線性漸變，你必須至少定義兩種顏色節點。顏色節點即你想要呈現平穩過渡的顏色。同時，你也可以設定一個起點和一個方向（或一個角度）。

基礎的語法就是這樣的：

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

預設的是從上到下的加入你不設定方向的話

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

從左到右

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

從左上角到右下角

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

還有一種是帶有角度的自定義的漸變

#grad {
  background
 
-image: linear-gradient(-90deg, red, yellow);
}

當然還有多個顏色的漸變

#grad {
  /* 標準的語法 */
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

CSS3的漸變還支援帶有透明度的寫法

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

重複的線性變化（其實這個也有的地方用到）

#grad {
  /* 標準的語法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

下面的是徑向漸變

emmmmmmm我不用我也不想寫，哈哈哈哈

就寫一個基礎的用法吧！！！

background-image: radial-gradient(shape size at position, start-color, ..., last-color);