CSS3中輕鬆實現漸變效果

漸變可以建立類似於彩虹的效果，低版本的瀏覽器不的不使開發者用來實現，css3將會輕鬆實現網頁漸變效果。

background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* firefox */

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* saf4+, chrome */
filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#c6ff00', endcolorstr='#538300', gradienttype='0'); /* ie*/

-webkit-gradient是webkit引擎對漸變的實現引數，一共有五個。

第乙個引數表示漸變型別（type），可以是linear（線性漸變）或者radial（徑向漸變）。

第二個引數和第三個引數，都是一對值，分別表示漸變起點和終點。這對值可以用座標形式表示，也可以用關鍵值表示，比如 left top（左上角）和left bottom（左下角）。

第四個和第五個引數，分別是兩個color-stop函式。color-stop函式接受兩個引數，第乙個表示漸變的位置，0為起點，0.5為中點，1為結束點；第二個表示該點的顏色。

ie依靠濾鏡實現漸變。startcolorstr表示起點的顏色，endcolorstr表示終點顏色。gradienttype表示漸變型別，0為預設值，表示垂直漸變，1表示水平漸變。

circle farthest-corner圓形漸變，ellipse farthest-corner橢圓漸

CSS3中輕鬆實現漸變效果

分享25個css3動畫按鈕和選單教程 css例項教程 十步學會用css建站 div css製作的個性水平導航選單例項 學習網頁中的如何應用css的濾鏡的效果 漸變可以建立類似於彩虹的效果，低版本的瀏覽器不的不使開發者用來實現，css3將會輕鬆實現網頁漸變效果。要得上面的線性漸變效果，我們這樣去定義c...

CSS3中漸變效果

1.線性漸變 a 從左到右漸變 div nth child 1 b 不指定方向預設是從上到下 div nth child 2 c 按照指定角度 div nth child 3 d 斑馬線漸變 2.頸項漸變 radial gradient 輻射半徑，中心的位置，起始顏色，終止顏色 中心點位置 at l...

CSS3漸變效果

css3提供了linear gradient屬性實現背景顏色的漸變功能。在以前，這種效果必須採用才能實現的。方位可選引數，漸變的方位。可以使用的值有 to top to top right to right to bottom to bottom left to left to top left。起...