純CSS實(shí)現(xiàn)顏色漸變效果（包含環(huán)形漸變、線性漸變、彩虹效果等）
我要評(píng)論下面我們來看看CSS漸變色(Gradients)技術(shù)基本的語法，瀏覽器支持情況和缺陷。
CSS漸變色(Gradients)術(shù)語和解釋
CSS漸變色(Gradients)能讓我們用一種顏色漸變的效果修飾一個(gè)空間——從一種顏色過渡到另外一種顏色——填充這個(gè)空間。漸變色有兩個(gè)形式：linear (線性漸變) 和 radial (環(huán)形漸變)。很顯然CSS漸變色(Gradients)技術(shù)是產(chǎn)生了一種視覺圖案效果，而實(shí)現(xiàn)這種視覺效果很簡(jiǎn)單，能通過簡(jiǎn)單編程實(shí)現(xiàn)。CSS3里很早就引入了CSS漸變色(Gradients)，但這種技術(shù)的推廣卻經(jīng)歷了很長(zhǎng)時(shí)間。
CSS顏色線性漸變的語法
CSS顏色線性漸變的語法在各種瀏覽器里的實(shí)現(xiàn)稍微有些不同，但最后是統(tǒng)一標(biāo)準(zhǔn)的：
第一個(gè)參數(shù)是漸變起始點(diǎn)或角。第二個(gè)參數(shù)是一種顏色停止點(diǎn)(color stops)。至少需要兩種顏色(起點(diǎn)和終點(diǎn))，你可以添加任意種顏色來增加顏色漸變的豐富程度。對(duì)顏色停止點(diǎn)的定義可以是一種顏色，或一種顏色加一個(gè)百分比：
/* color-stop(percentage/amount, color) */
color-stop(0.20, red)
因?yàn)镃SS漸變色(Gradients)技術(shù)是CSS3里比較新的技術(shù)，屬于高級(jí)的CSS功能，于是每種瀏覽器對(duì)這種技術(shù)的實(shí)現(xiàn)都添加了一些自己的特色。例如以WebKIt為渲染引擎的谷歌瀏覽器，就對(duì)它實(shí)現(xiàn)了多種語法。下面的這段代碼基本包括了所有自頂向下顏色漸變的所有情況：
#example1 {
/* 底色 */
background-color: #063053;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
/* chrome 10+, safari 5.1+ */
background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);
/* firefox; multiple color stops */
background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);
/* ie 6+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
/* ie8 + */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
/* ie10 */
background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
/* opera 11.1 */
background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
/* 標(biāo)準(zhǔn)寫法 */
background-image: linear-gradient(#063053, #395873, #5c7c99);
}
注意，我們首先設(shè)定了一個(gè)背景色。這個(gè)顏色是在萬一用戶使用的瀏覽器不支持CSS漸變色(Gradients)技術(shù)時(shí)使用的顏色。CSS漸變色(Gradients)技術(shù)里還支持帶有角度的漸變方向，而不僅僅只有直上直下或直左直右。我們可以用下面的語法實(shí)現(xiàn)它：
#example2 {
/* fallback */
background-color:#063053;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
/* firefox; multiple color stops */
background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
/* ie10 */
background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
/* opera 11.1 */
background-image: -o-linear-gradient(45deg, #063053, #395873);
/* The "standard" */
background-image: linear-gradient(45deg, #063053, #395873);
}
我們可以做的更復(fù)雜些….一個(gè)色彩繽紛的CSS顏色漸變？下面我們來做一個(gè)彩虹：
/* example 3 - linear rainbow */
#example3 {
/* fallback */
background-color:#063053;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(red, green, blue, purple, orange);
/* firefox; multiple color stops */
background-image:-moz-linear-gradient(top, red, green, blue, purple, orange);
/* ie10 */
background-image: -ms-linear-gradient(red, green, blue, purple, orange);
/* opera 11.1 */
background-image: -o-linear-gradient(red, green, blue, purple, orange);
/* The "standard" */
background-image: linear-gradient(red, green, blue, purple, orange);
}
關(guān)于IE對(duì)CSS顏色漸變技術(shù)的支持做一些說明：在早期IE是使用filter和-ms-filter語法實(shí)現(xiàn)漸變色，而最新版的IE里改為了-ms-linear-gradient語法。我們可以使用CSS里條件判斷語句來解決這個(gè)問題：
<!--[if lt IE 10]>
<style>
.gradientElement {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
}
</style>
<![endif]-->
不是很理想，但這對(duì)設(shè)計(jì)一個(gè)網(wǎng)站很重要。
CSS環(huán)形顏色漸變(Radial Gradients)
CSS環(huán)形顏色漸變(Radial Gradients)跟線性漸變(linear gradients)不一樣，它不是沿著一個(gè)方向漸變，而是以一個(gè)點(diǎn)為中心，向四周輻射漸變，360度的。目前除了IE外的所有瀏覽器都支持CSS環(huán)形顏色漸變(Radial Gradients)，但它們也都有各自不同的語法…..我說的就是你，WebKit引擎的瀏覽器，WebKit曾經(jīng)徹底修改了它的CSS環(huán)形顏色漸變(Radial Gradients)的語法。下面我們來看看老式的寫法：
/* basic */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red));
/* color stops */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
而現(xiàn)在WebKit(主要代表是谷歌瀏覽器)里的新語法跟火狐瀏覽器的完全一致了：
這種環(huán)形顏色漸變語法是最新的火狐和谷歌瀏覽器使用語法。還有一些常量可以使用在這種漸變技術(shù)中來設(shè)定漸變環(huán)形的大?。?/p>
closest-side: 對(duì)于原型，是指漸變圖形擴(kuò)散時(shí)需要到達(dá)的最近的一個(gè)邊。對(duì)于橢圓，是指橫向或縱向中要達(dá)到最近的一個(gè)邊。
closest-corner: 是指漸變圖形擴(kuò)散時(shí)需要到達(dá)的最近的一個(gè)角
farthest-side: 跟 closest-side 相似，但到達(dá)到的是最遠(yuǎn)的一個(gè)邊。
farthest-corner: 是指漸變圖形擴(kuò)散時(shí)需要到達(dá)的最遠(yuǎn)的一個(gè)角
contain: closest-side的同義詞.
cover: farthest-corner的同義詞
環(huán)形顏色漸變(Radial Gradients)的一個(gè)基本的用法是這樣的：
#example4 {
background-image: -moz-radial-gradient(orange, red);
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* old */
background-image: -webkit-radial-gradient(orange, red); /* new syntax */
background-image: radial-gradient(orange, red);
}
上面的例子沒有設(shè)定位置和大小——只有兩個(gè)顏色停止點(diǎn)。實(shí)際是可以使用無數(shù)顏色，就像下面我們制作的彩虹：
#example5 {
background-image: -moz-radial-gradient(red,green,blue,purple,orange);
background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); /* old */
background-image: -webkit-radial-gradient(red, green, blue, purple, orange); /* new syntax */
background-image: radial-gradient(red, green, blue, purple, orange);
}
我們實(shí)現(xiàn)一個(gè)更復(fù)雜的，加上位置信息和更多的顏色停止點(diǎn)：
#example6 {
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
}
注意上面使用的顏色寫法和長(zhǎng)度的單位。是事實(shí)上你可以使用任何顏色寫法或長(zhǎng)度單位。
CSS顏色漸變(Gradients)的技巧和提示
CSS顏色漸變(Gradients)技術(shù)很有價(jià)值，但有時(shí)很難實(shí)現(xiàn)。有時(shí)你已經(jīng)實(shí)現(xiàn)了想要的漸變，而瀏覽器的支持也會(huì)成為一個(gè)問題。下面是一些使用CSS顏色漸變(Gradients)的建議：
想讓你的CSS顏色漸變(Gradients)表現(xiàn)一定的透明度？使用 rgba 顏色。
使用背景色墊底，這樣防止當(dāng)瀏覽器不支持時(shí)不注意沒有任何顏色。
火狐瀏覽器和谷歌瀏覽器都支持repeating-linear-gradient 和 repeating-radial-gradient，用法是：
background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);
background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);
}
如果你對(duì)漸變效果要求很嚴(yán)格，例如圖表，動(dòng)畫，我推薦你使用Dojo的GFX程序包，它是創(chuàng)建矢量圖的利器。而且對(duì)IE的支持也非常好！
CSS顏色漸變底色
老式瀏覽器，例如IE6，IE8或早期的火狐，并不支持漸變色技術(shù)，所以，你最好設(shè)置一個(gè)缺省的底色，當(dāng)遇到不支持的瀏覽器時(shí)，background顏色就起到作用了：
/* example 1 - basic */
#example1 {
/* fallback */
background-color:#063053;
/* gradients below */
}
對(duì)于不支持的瀏覽器的另外一種方法是先用新式瀏覽器實(shí)現(xiàn)這個(gè)效果，然后截圖，然后使用CSS條件判斷來調(diào)整輸出方式。
CSS顏色漸變技術(shù)是CSS的一種發(fā)展進(jìn)化的結(jié)果，隨著現(xiàn)代瀏覽器技術(shù)的越來越成熟，我們能更自信的使用這種技術(shù)了。
相關(guān)文章
- 每個(gè)人都喜歡彩虹，都期待彩虹的出現(xiàn)，這篇文章主要為大家詳細(xì)介紹了CSS制作夢(mèng)幻彩虹的5種效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-06
- 這篇文章主要介紹了CSS制作各種樣式的彩虹效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-06