天天看點

linear-gradient與radial-gradient

漸變可以建立類似于彩虹的效果,低版本的浏覽器不的不使開發者用圖檔來實作,css3将會輕松實作網頁漸變效果。

linear-gradient與radial-gradient

要得上面的線性漸變效果,我們這樣去定義css3樣式:

-moz-linear-gradient有三個參數。第一個參數表示線性漸變的方向,top是從上到下、left是從左到右,如果定義成left top,那就是從左上角到右下角。第二個和第三個參數分别是起點顔色和終點顔色。你還可以在它們之間插入更多的參數,表示多種顔色的漸變。

-webkit-gradient是webkit引擎對漸變的實作參數,一共有五個。

第一個參數表示漸變類型(type),可以是linear(線性漸變)或者radial(徑向漸變)。

第二個參數和第三個參數,都是一對值,分别表示漸變起點和終點。這對值可以用坐标形式表示,也可以用關鍵值表示,比如 left top(左上角)和left bottom(左下角)。

第四個和第五個參數,分别是兩個color-stop函數。color-stop函數接受兩個參數,第一個表示漸變的位置,0為起點,0.5為中點,1為結束點;第二個表示該點的顔色。

ie依靠濾鏡實作漸變。startcolorstr表示起點的顔色,endcolorstr表示終點顔色。gradienttype表示漸變類型,0為預設值,表示垂直漸變,1表示水準漸變。

linear-gradient與radial-gradient
linear-gradient與radial-gradient
linear-gradient與radial-gradient

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

繼續閱讀