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下也可以實現漸變，不過要加濾鏡。

下面是代碼：

.line-color{
            width: 200px;
            height: 200px;
            FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#AC07BD, endColorStr=#f6f6f8); /*IE 6 7 8*/
            background: -ms-linear-gradient(top, #AC07BD, #f6f6f8);        /* IE 10 */
            background:-moz-linear-gradient(top, #AC07BD, #f6f6f8);/*火狐*/
 
 8             background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AC07BD), to(#f140f8));  /* Safari 4-5, Chrome 1-9*/
            background: -webkit-linear-gradient(top, #AC07BD, #f140f8);   /*Safari5.1 Chrome 10+*/
            background: -o-linear-gradient(top, #AC07BD, #f140f8);  /*Opera 11.10+*/
               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;}