下面來一起學習下css3的漸變，激動人心啊，終於可以不用來做漸變背景了。。
webkit和gecko引擎對於css3的漸變實現有一定的差異，只能分開學習。
一、webkit
-webkit-gradient(, [, ]?, [, ]? [,stop]*)
引數說明：
：定義漸變型別，包括線性漸變（linear）和徑向漸變（radial）。
：定義漸變起始點和結束點座標，可以是數值、百分比和關鍵字。
：當定義徑向漸變時，用來設定徑向漸變的長度，數值。
：定義漸變色和步長。包括三個型別值，from(color value),to(color value),color-stop(value, color value)第乙個引數數值或者百分值，取值為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)); 注意當圓心座標相同，內圓和外圓半徑相等時，無漸變；當圓心座標相同，內圓的半徑大於外圓的半徑時，相當於內圓半徑和外圓半徑互換位置，並且from的顏色和to的顏色也呼喚，即是開始顏色和結束顏色互換。
二、gecko
1、線性漸變
-moz-linear-gradient([|| ,]? [, ]*)
引數說明：
：定義漸變起始點和結束點座標，可以是數值、百分比和關鍵字。
：當定義直線漸變的角度，單位包括了deg（度）,grad（梯度）,rad（弧度）。
：定義步長。用的時候第乙個引數設定顏色，第二個引數設定顏色的位置，百分比或者數值。
例如：-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([|| ,]? [|| ,]? , [,]*)
引數說明：
，同上。
，同上。
，定義徑向漸變的形狀，包括circle ellipse。
，定義圓半徑，或者橢圓軸長度。包含了多個關鍵字，closest-side,closest-corner,farthest-side,farthest-corner,contain, cover。
，同上。
例如：-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、重複漸變
-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實現
ie瀏覽器並不支援css漸變，只能通過漸變濾鏡來做。
filter: progid:dximagetransform.microsoft.gradient(enabled=benabled, startcolorstr=iwidth, endcolorstr=iwidth);
enabled,濾鏡是否啟用，startcolorstr，開始顏色和透明度，endcolorstr，結束顏色和透明度。
例如：filter: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#9999ff, endcolorstr=#fff);gradienttype為0表示的是水平漸變，為1的話就代表的是垂直漸變。
css3學習 理論之文字
1.text shadow，在css3中被重新定義，增加了不透明度效果。例如 text shadow 1px 1px 1px 333 第乙個值表示水平偏移，第二個值表示垂直偏移，第三個值表示模糊半徑 可選 第四個值表示陰影的顏色 可選 還可以接受乙個以逗號分隔的陰影效果列表。例如 text shad...
css3學習 理論之彈性盒模型
彈性盒模型，該模型用於決定元素在盒子中的分布方式以及如何處理盒子的可用空間。有了他，咱們就可以輕鬆建立自適應瀏覽器視窗的流動布局或者自適應字型大小的彈性布局。其屬性有 box align，定義子元素在盒子內垂直方向上的空間分配方式。box pack，定義子元素在盒子內水平方向上的空間分配方式。box...
css3學習 理論之多列布局
例子 columns 250px 3 250px表示的是列寬，3表示的是多列的數目。也可以只指定列寬，column width 300px moz column width 300px webkit column width 300px 網頁中每個欄目的最大寬度為300畫素 根據視窗寬度自動調整幾欄...