技術標籤：css3javascriptcss3html5

linear-gradient()影象漸變屬性詳解

對於**linear-gradient()**我學習的時候，查了很多資料，希望這篇部落格能為你提供一些幫助。
首先給大家講的就是相容性，在IE瀏覽器中這個屬性的設定是不相容的，當然在IE瀏覽器中也可以實現類似的效果，那邊是濾鏡(fliter)的作用了.其他的不同的瀏覽器也是有不同的，比如chrome一般要加-webkit-字首，如：-webkit-linear-gradient，比如opera就是-o-linear-gradient。

linear-gradient是屬於CSS3中Gradient中的兩個屬性一個，這兩個屬性分別為linear-gradient（線性漸變）和radial-gradient（徑性漸變）,其中linear-gradient線性漸變呈現線性變化，大家一看名稱就可以知道這相當於是直線變化，比如充左上角到右下角的變化，或者從上到下，而radial-gradient徑性漸變呈現徑性變化，這便是大家經常見到的圓圈漸變效果，從影象的中間向四周進行變化，像是大家仍塊石頭到河裡蕩起的漣漪一樣。而本片部落格則是講解linear-gradient,當然，linear-gradient和radial-gradient是相通的，他的使用方法一樣，則是呈現的效果不同而已。

如下是簡單的linear-gradient的使用

// An highlighted block
<div class=".header-box"></div>
.header-box {
  background: $head-bgc;
  background-image: -webkit-linear-gradient(#000, #121212);
  background-image: linear-gradient(#000, #121212);
  width: 100%;

}

顯示如圖 從左-右漸變