css3實現顏色漸變以及兼容性處理

    有時咱們會看到網站上的一些圖片是漸變色的，這些圖片有的是ui設計出來的，有的則是直接經過css3製做出來的。下面就講一下css3實現漸變色的方法，以及在各個瀏覽器上的兼容性。

　　CSS3 Gradient分爲linear-gradient(線性漸變)和radial-gradient(徑向漸變)。而咱們今天主要是針對線性漸變來剖析其具體的用法。爲了更好的應用CSS3 Gradient,咱們須要先了解一下目前的幾種現代瀏覽器的內核，主流內容主要有Mozilla（Gecko）（熟悉的有Firefox，Flock等瀏覽器）、WebKit（熟悉的有Safari、Chrome等瀏覽器）、Opera(presto)（Opera瀏覽器）、Trident（討厭的IE瀏覽器）。在ie下也能夠實現漸變，不過要加濾鏡。

下面是代碼：

 1 .line-color{
 2             width: 200px;
 3             height: 200px;
 4             FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#AC07BD, endColorStr=#f6f6f8); /*IE 6 7 8*/
 5             background: -ms-linear-gradient(top, #AC07BD, #f6f6f8);        /* IE 10 */
 6             background:-moz-linear-gradient(top, #AC07BD, #f6f6f8);/*火狐*/
 7  
 8             background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AC07BD), to(#f140f8));  /* Safari 4-5, Chrome 1-9*/
 9             background: -webkit-linear-gradient(top, #AC07BD, #f140f8);   /*Safari5.1 Chrome 10+*/
10             background: -o-linear-gradient(top, #AC07BD, #f140f8);  /*Opera 11.10+*/
               
11         }linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */

代碼行4/5  線性漸變在Trident (IE)下的應用

IE依靠濾鏡實現漸變。startColorstr表示起點的顏色，endColorstr表示終點顏色。GradientType表示漸變類型，0爲缺省值，表示垂直漸變，1表示水平漸變。如圖所示：

代碼行6  線性漸變在Mozilla下的應用

其共有三個參數，第一個參數表示線性漸變的方向，top是從上到下、left是從左到右，若是定義成left top，那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還能夠在它們之間插入更多的參數，表示多種顏色的漸變。如圖所示：

代碼行8/9   線性漸變在Webkit下的應用

語法：

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新發布書寫語法 -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式語法書寫規則

 

參數：-webkit-gradient是webkit引擎對漸變的實現參數，一共有五個。第一個參數表示漸變類型（type），能夠是linear（線性漸變）或者radial（徑向漸變）。第二個參數和第三個參數，都是一對值，分別表示漸變起點和終點。這對值能夠用座標形式表示，也能夠用關鍵值表示，好比 left top（左上角）和left bottom（左下角）。第四個和第五個參數，分別是兩個color-stop函數。color-stop函數接受兩個參數，第一個表示漸變的位置，0爲起點，0.5爲中點，1爲結束點；第二個表示該點的顏色。

代碼行10  線性漸變在Opera下的應用

 

參數：-o-linear-gradient有三個參數。第一個參數表示線性漸變的方向，top是從上到下、left是從左到右，若是定義成left top，那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還能夠在它們之間插入更多的參數，表示多種顏色的漸變。

示例：

background: -o-linear-gradient(top,#ccc, #000);

漸變上應用透明─透明度(Transparency)：

透明度漸變

background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));

最後一個0表明透明度。

若是全部點和長度使用依賴於background-size屬性固定單元（百分比或關鍵字）定義，那麼漸變背景不會被該屬性影響。

透明度還支持透明漸變。這對於製做一些特殊的效果是至關有用的，例如，當堆疊多個背景時。這裏是兩個背景的結合：一張圖片，一個白色到透明的線性漸變。咱們來看一個官網的示例吧：

background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);

接着看看效果吧

更多：gradient 01 

        gradient02-MDN

 

PS1：

在實際的項目中，每每會碰到圓角和漸變的組合，若是使用上面的寫法，那麼在 ie9 下會有 bug（在 ie9 下背景色不能徹底切完），解決方法是SVG，具體點此查看。

PS2：

因爲 filter 是 ie 的私有屬性，因此咱們須要針對 ie9 單獨處理濾鏡效果，代碼以下： 代碼以下:

:root {filter:none;}

總結：

綜上所述，線性漸變的兼容寫法以下：

 

.gradient{
background: #000000;
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

} :root .gradient{filter:none;}