多重背景與漸層背景是 CSS3 才開始有的背景屬性

瀏覽器適用前綴

Google Chrome 與 Apple Safari 使用 -webkit-
Mozilla FireFox 使用 -moz- 
Opera 使用 -o-
（實測結果 Mac 的 FireFox 也吃 -webkit-）

瀏覽器的支援度

背景的基礎寫法

以下是背景的簡寫寫法

background: 顏色 url() repeat position;
background: #333 url(images/firefox.png) no-repeat left bottom;

拆開來的獨自寫法為

background-image: url(images/firefox.png);
background-position: left bottom;
background-origin: border-box;
background-repeat: no-repeat;

一般在寫 background 我會習慣寫簡寫，比較快速XD

線性漸層 linear-gradient

還沒有 CSS3 之前，想要有線性漸層只能做一張細細長長的背景圖，利用 background-repeat 的屬性去做重複背景。現在有 CSS3 了，做漸層背景，想要換顏色可以隨時換掉，想調整角度只要改個數值就好，真的是方便無敵多。

background: linear-gradient(顏色漸變方向<開始方向 結束方向>, 色碼1 位置1,色碼2 位置2,....)

- 顏色漸變方向，預設值為由上而下 linear-gradient(yellow,red)
- 由左而右的線性漸層效果 
    - background: -webkit-linear-gradient(left,yellow,red);
    - background: -o-linear-gradient(right,yellow,red);
    - background: -moz-linear-gradient(right,yellow,red);
    - background: linear-gradient(to right,yellow,red);

- 對角線的線性漸層效果（由左下向右上）
    - background: -webkit-linear-gradient(left top,yellow,red);
    - background: -o-linear-gradient(bottom right,yellow,red);
    - background: -moz-linear-gradient(bottom right,yellow,red);
    - background: linear-gradient(to bottom right,yellow,red);
- 利用角度調整的線性漸層效果
    - background: linear-gradient(90deg,yellow,red);

如果背景需要有圖片加上漸層背景，要先寫圖片，再寫漸層，如果寫相反，圖片會被漸層蓋住。而圖片與漸層 或 漸層與漸層中間用逗號 , 分開。

.box{
  background: url(https://mdn.mozillademos.org/files/11305/firefox.png) no-repeat bottom,
    -webkit-linear-gradient(top, purple, white);
}

漸層顏色後面可以加上位置，形成銳利的直線。

.box{
  background: -webkit-linear-gradient(left bottom,blue 50%,lightgreen 50%);
}//後面的百分比就是漸層的位置，這樣可以造成銳利的直線。

圓形(徑向)漸層 radial-gradient

ellipse為橢圓、circle為圓形，而在其後，寫在越前面的顏色為越靠近中心點的顏色。

background: radial-gradient(ellipse 或 circle,顏色1,顏色2, ......);

.box{
  background: radial-gradient(ellipse,#fff,#ccc,#999,#666,#333,#000);
  //ellipse橢圓形,circle為圓型
}

試玩範例

以上是今天介紹的 CSS 漸層，各位看倌明天見囉～

參考資料：
[1] CSS Backgrounds - w3.org
[2] CSS3 多重背景