縱向漸變： 

                                       

橫向漸變：

                                                                     

默認(rèn)縱向漸變顏色：

                               

對于網(wǎng)頁設(shè)計師而言，顏色漸變在網(wǎng)頁設(shè)計中十分常見，而對于網(wǎng)頁制作者來說，通常的方法就是把漸變切成圖片來實現(xiàn)。伴隨著css3的出現(xiàn)，實現(xiàn)背景顏色漸變，圖片不再是唯一的實現(xiàn)方式。雖然IE瀏覽器還沒有實現(xiàn)，但Mozilla和webkit內(nèi)核的瀏覽器已經(jīng)接受了這一實現(xiàn)方式。在這里面，我分別就這兩種內(nèi)核的瀏覽器進(jìn)行講解。
一、以firefox為代表的mozilla內(nèi)核的瀏覽器（注意，以下的圖請有firefox瀏覽器下查看）
firefox的linear gradient（線性漸變）的幾點(diǎn)說明：
1）基本語法：

1、-moz-linear-gradient是background的一個屬性值；
2、它的第一組參數(shù)<角度位置>非常靈活，他的基本組成點(diǎn)位<point>(漸變的出發(fā)點(diǎn))和角度，它可以被指定為一個百分比，像素，或者使用”left”，”center”，”right”的水平和”top”、”center”、”buttom”的垂直定位。位置從最愛影響的元素左上角開始。如果只在水平漸變的話，只要設(shè)置：”left center”或”right center”，如果垂直漸變的話，設(shè)置為”center top”或者”center bottom”。firefox下可以省略掉center。


3、如果這兩個值是百分比的值的話，那么第一個是水平漸變位置，第二個是垂直漸變位置，這個時間還需要一個角度值，比如“90deg”，你也可以隨意改動大小來查看顯示結(jié)果。


二、以chrome為代表的webkit內(nèi)核的瀏覽器（注意，以下的圖請在chrome瀏覽器下查看）
webkit內(nèi)核的瀏覽器有safai、chrome的linear gradient（線性漸變）的幾點(diǎn)說明：
1）基本語法：


參數(shù)類型 簡要說明
type 漸變的類型，分為線性漸變（linear）和徑向漸變（radial）
start_point 漸變圖片中漸變的起始點(diǎn)
end_point 漸變圖像中漸變的結(jié)束點(diǎn)
stop color-stop()方法，指定漸變進(jìn)程中特定的顏色
inner_center 內(nèi)部中心點(diǎn)，徑向漸變起始圓環(huán)
inner_radius 內(nèi)部半徑，徑向漸變起始圓
outer_center 外部漸變結(jié)束圓的中心點(diǎn)
outer_radius 外部漸變結(jié)束圓的半徑
1、start_point(x1,y1)，end_point(x2,y2)，這里的x,y對應(yīng)左上角為起點(diǎn)的坐標(biāo)，此處的x,y參數(shù)表示與css中的background-position是一致的，可以使用像素、百分比或者left,top,right,bottom。
當(dāng)x1 = x2，y1 ≠ y2，實現(xiàn)垂直漸變，調(diào)整y1，y2的值可以調(diào)整漸變半徑大?。?
bbackground-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#fff800), to(#f60));
當(dāng)y1 = y2，x1 ≠ x2，實現(xiàn)水平漸變，調(diào)整x1，x2的值可以調(diào)整漸變半徑大??；
bbackground-image:-webkit-gradient(linear,0% 0%, 100% 0%, from(#fff800), to(#f60));
當(dāng)y1 ≠ y2，x1 ≠ x2，實現(xiàn)角度漸變，當(dāng)x1，x2，y1，y2取值為極值的時候接近垂直漸變或水平漸變；
bbackground-image:-webkit-gradient(linear,10% 30%, 100% 100%, from(#fff800), to(#f60));
當(dāng)x1=x2，y1=y2，沒有漸變。
2、color-stop是一個過渡點(diǎn)，相當(dāng)于ps里面，多添加一個漸變的點(diǎn)，有兩個參數(shù)，一個是點(diǎn)的位置，另外一個是過渡點(diǎn)的顏色。
background-image:-webkit-gradient(linear,0% 0%, 100% 0%, from(#fff800), to(#f60),color-stop(20%,#fff));
background-image:-webkit-gradient(linear,0% 0%, 100% 0%, from(#fff800), to(#fff),color-stop(20%,#fff),color-stop(20%,#f60));
3、創(chuàng)建徑向漸變
background-image:-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#fff800), to(#f60), color-stop(90%, #c00));
轉(zhuǎn)載請注明本文鏈接：http://www.rainleaves.com/html/1214.html
由 lyhydfp 發(fā)表在 html5+css3分類目錄，并貼了 css3、linear gradient、背景線性漸變 標(biāo)簽。
IE瀏覽器下漸變設(shè)置方法：

最新評論