下面來一起學(xué)習(xí)下css3的漸變，激動人心啊，終于可以不用圖片來做漸變背景了。。

webkit和gecko引擎對于css3的漸變實現(xiàn)有一定的差異，只能分開學(xué)習(xí)。

一、webkit

-webkit-gradient(<type>, <point>[, <radius>]?, <point>[, <radius>]? [,stop]*)

參數(shù)說明：

<type>：定義漸變類型，包括線性漸變（linear）和徑向漸變（radial）。

<point>：定義漸變起始點和結(jié)束點坐標(biāo)，可以是數(shù)值、百分比和關(guān)鍵字。

<radius>：當(dāng)定義徑向漸變時，用來設(shè)置徑向漸變的長度，數(shù)值。

<stop>：定義漸變色和步長。包括三個類型值，from(color value),to(color value),color-stop(value, color value)第一個參數(shù)數(shù)值或者百分值，取值為0~1。

例如：

1、線性漸變：background:-webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(0.5, green));?background:-webkit-gradient(linear, left top, left bottom, from(blue), to(red));?background:-webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(0.5, white), color-stop(0.5, #000));?background:-webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(0.4, white), color-stop(0.6, #000));感受一下吧。。

2、徑向漸變：background:-webkit-gradient(radial, 200 100, 10, 200 100, ?100, ?from(red), ?to(green));?background:-webkit-gradient(radial, 200 100, 10, 200 100, ?100, ?from(red), ?to(green), color-stop(80%, blue)); 注意當(dāng)圓心坐標(biāo)相同，內(nèi)圓和外圓半徑相等時，無漸變；當(dāng)圓心坐標(biāo)相同，內(nèi)圓的半徑大于外圓的半徑時，相當(dāng)于內(nèi)圓半徑和外圓半徑互換位置，并且from的顏色和to的顏色也呼喚，即是開始顏色和結(jié)束顏色互換。

二、gecko

1、線性漸變

-moz-linear-gradient([<point> || <angle>,]? <stop> [, <stop>]*)

參數(shù)說明：

<point>：定義漸變起始點和結(jié)束點坐標(biāo)，可以是數(shù)值、百分比和關(guān)鍵字。

<angle>：當(dāng)定義直線漸變的角度，單位包括了deg（度）,grad（梯度）,rad（弧度）。

<stop>：定義步長。用的時候第一個參數(shù)設(shè)置顏色，第二個參數(shù)設(shè)置顏色的位置，百分比或者數(shù)值。

例如：

-moz-linear-gradient(red, blue);?-moz-linear-gradient(top left, red, blue);?-moz-linear-gradient(left, red, orange, yellow, green, blue);?-moz-linear-gradient(top left, red, rgba(255,0,0,0));?-moz-linear-gradient(left 90deg, red, rgba(255,0,0,0));?-moz-linear-gradient(0deg, red, rgba(255,0,0,0));?-moz-linear-gradient(90deg, red, rgba(255,0,0,0));?-moz-linear-gradient(-90deg, red, rgba(255,0,0,0));?-moz-linear-gradient(top, blue, green 50%, orange);趕快試試看下效果吧。。

2、徑向漸變

-moz-radial-gradient([<point> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[,<stop>]*)

參數(shù)說明：

<point>，同上。

<angle>，同上。

<shape>，定義徑向漸變的形狀，包括circle ellipse。

<size>，定義圓半徑，或者橢圓軸長度。包含了多個關(guān)鍵字，closest-side,closest-corner,farthest-side,farthest-corner,contain, cover。

<stop>，同上。

例如：

-moz-radial-gradient(red, yellow, green);?-moz-radial-gradient(red 20%, yellow 40%, green 50%);?-moz-radial-gradient(bottom left, red, yellow, green 70%);?-moz-radial-gradient(left, circle, red, yellow, green 50%);?-moz-radial-gradient(ellipse cover, yellow, green);趕快實驗一把吧！

3、重復(fù)漸變

-moz-repeating-linear-gradient和-moz-repeating-radial-gradient。

例如：

-moz-repeating-linear-gradient(top left 60deg, black, black 10px, white 10px, white 20px);

-moz-repeating-radial-gradient(circle, black, black 10px, white 10px, white 20px);

三、IE實現(xiàn)

IE瀏覽器并不支持css漸變，只能通過漸變?yōu)V鏡來做。

filter: progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled, startColorStr=iWidth, endColorStr=iWidth);

enabled,濾鏡是否激活，startColorStr，開始顏色和透明度，endColorStr，結(jié)束顏色和透明度。

例如：filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#9999ff, endColorStr=#fff);gradientType為0表示的是水平漸變，為1的話就代表的是垂直漸變。

轉(zhuǎn)載于:https://www.cnblogs.com/xiaobudiandian/archive/2011/12/18/2291744.html

總結(jié)

以上是生活随笔為你收集整理的css3学习 理论之渐变的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。