這篇文章主要介紹“CSS怎么實現(xiàn)顏色漸變效果”，在日常操作中，相信很多人在CSS怎么實現(xiàn)顏色漸變效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS怎么實現(xiàn)顏色漸變效果”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

10年專注成都網(wǎng)站制作，成都定制網(wǎng)站，個人網(wǎng)站制作服務，為大家分享網(wǎng)站制作知識、方案，網(wǎng)站設計流程、步驟,成功服務上千家企業(yè)。為您提供網(wǎng)站建設,網(wǎng)站制作,網(wǎng)頁設計及定制高端網(wǎng)站建設服務,專注于成都定制網(wǎng)站,高端網(wǎng)頁制作,對成都展覽展示等多個領域，擁有豐富設計經(jīng)驗。

下面我們來看看CSS漸變色(Gradients)技術基本的語法，瀏覽器支持情況和缺陷。

CSS漸變色(Gradients)術語和解釋

CSS漸變色(Gradients)能讓我們用一種顏色漸變的效果修飾一個空間——從一種顏色過渡到另外一種顏色——填充這個空間。漸變色有兩個形式：linear (線性漸變) 和 radial (環(huán)形漸變)。很顯然CSS漸變色(Gradients)技術是產(chǎn)生了一種視覺圖案效果，而實現(xiàn)這種視覺效果很簡單，能通過簡單編程實現(xiàn)。CSS3里很早就引入了CSS漸變色(Gradients)，但這種技術的推廣卻經(jīng)歷了很長時間。

CSS顏色線性漸變的語法

CSS顏色線性漸變的語法在各種瀏覽器里的實現(xiàn)稍微有些不同，但最后是統(tǒng)一標準的：

代碼如下:

background-image: linear-gradient( || ,]? , [, ]*)

第一個參數(shù)是漸變起始點或角。第二個參數(shù)是一種顏色停止點(color stops)。至少需要兩種顏色(起點和終點)，你可以添加任意種顏色來增加顏色漸變的豐富程度。對顏色停止點的定義可以是一種顏色，或一種顏色加一個百分比：

代碼如下:

/*  color-stop(percentage/amount, color) */
color-stop(0.20, red)

因為CSS漸變色(Gradients)技術是CSS3里比較新的技術，屬于高級的CSS功能，于是每種瀏覽器對這種技術的實現(xiàn)都添加了一些自己的特色。例如以WebKIt為渲染引擎的谷歌瀏覽器，就對它實現(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);
/* 標準寫法 */
background-image: linear-gradient(#063053, #395873, #5c7c99);
}

注意，我們首先設定了一個背景色。這個顏色是在萬一用戶使用的瀏覽器不支持CSS漸變色(Gradients)技術時使用的顏色。CSS漸變色(Gradients)技術里還支持帶有角度的漸變方向，而不僅僅只有直上直下或直左直右。我們可以用下面的語法實現(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);
}

我們可以做的更復雜些….一個色彩繽紛的CSS顏色漸變？下面我們來做一個彩虹：

代碼如下:

/* 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);
}

關于IE對CSS顏色漸變技術的支持做一些說明：在早期IE是使用filter和-ms-filter語法實現(xiàn)漸變色，而最新版的IE里改為了-ms-linear-gradient語法。我們可以使用CSS里條件判斷語句來解決這個問題：

代碼如下:

不是很理想，但這對設計一個網(wǎng)站很重要。

CSS環(huán)形顏色漸變(Radial Gradients)

CSS環(huán)形顏色漸變(Radial Gradients)跟線性漸變(linear gradients)不一樣，它不是沿著一個方向漸變，而是以一個點為中心，向四周輻射漸變，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(主要代表是谷歌瀏覽器)里的新語法跟火狐瀏覽器的完全一致了：

代碼如下:

radial-gradient( [ || ,]? [ || ,]? , [, ]*)

這種環(huán)形顏色漸變語法是最新的火狐和谷歌瀏覽器使用語法。還有一些常量可以使用在這種漸變技術中來設定漸變環(huán)形的大?。?/p>

closest-side: 對于原型，是指漸變圖形擴散時需要到達的最近的一個邊。對于橢圓，是指橫向或縱向中要達到最近的一個邊。
closest-corner: 是指漸變圖形擴散時需要到達的最近的一個角
farthest-side: 跟 closest-side 相似，但到達到的是最遠的一個邊。
farthest-corner: 是指漸變圖形擴散時需要到達的最遠的一個角
contain: closest-side的同義詞.
cover: farthest-corner的同義詞
環(huán)形顏色漸變(Radial Gradients)的一個基本的用法是這樣的：

代碼如下:

#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ù)顏色，就像下面我們制作的彩虹：

代碼如下:

#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);
}

我們實現(xià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%);
}

注意上面使用的顏色寫法和長度的單位。是事實上你可以使用任何顏色寫法或長度單位。

CSS顏色漸變(Gradients)的技巧和提示

CSS顏色漸變(Gradients)技術很有價值，但有時很難實現(xiàn)。有時你已經(jīng)實現(xiàn)了想要的漸變，而瀏覽器的支持也會成為一個問題。下面是一些使用CSS顏色漸變(Gradients)的建議：

想讓你的CSS顏色漸變(Gradients)表現(xiàn)一定的透明度？使用 rgba 顏色。
使用背景色墊底，這樣防止當瀏覽器不支持時不注意沒有任何顏色。
火狐瀏覽器和谷歌瀏覽器都支持repeating-linear-gradient 和 repeating-radial-gradient，用法是：

代碼如下:

#example7 {
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);
}

如果你對漸變效果要求很嚴格，例如圖表，動畫，我推薦你使用Dojo的GFX程序包，它是創(chuàng)建矢量圖的利器。而且對IE的支持也非常好！

CSS顏色漸變底色

老式瀏覽器，例如IE6，IE8或早期的火狐，并不支持漸變色技術，所以，你最好設置一個缺省的底色，當遇到不支持的瀏覽器時，background顏色就起到作用了：

代碼如下:

/* example 1 - basic */
#example1 {
/* fallback */
background-color:#063053;
/* gradients below */
}

對于不支持的瀏覽器的另外一種方法是先用新式瀏覽器實現(xiàn)這個效果，然后截圖，然后使用CSS條件判斷來調整輸出方式。

CSS顏色漸變技術是CSS的一種發(fā)展進化的結果，隨著現(xiàn)代瀏覽器技術的越來越成熟，我們能更自信的使用這種技術了。

到此，關于“CSS怎么實現(xiàn)顏色漸變效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
當前題目：CSS怎么實現(xiàn)顏色漸變效果
文章URL：http://weahome.cn/article/gdgjjo.html