CSS3中輕鬆實現漸變效果

2021-07-05 05:56:09 字數 2104 閱讀 5850

漸變可以建立類似於彩虹的效果,低版本的瀏覽器不的不使開發者用來實現,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*/

-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表示水平漸變。

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。起...