css3的線性漸變

2021-09-17 02:45:37 字數 891 閱讀 3761

這種漸變你必須定義至少兩種顏色,也就是說可以更多種甚至不限制數量。

語法如下:

background:<strong> linear-gradient(direction, color-stop1, color-stop2, ...);

第乙個引數為方向,如果我們不指定,那麼預設為從上到下。第乙個顏色引數即為開始的第乙個顏色如下:

如果需要從左到右,可以新增第乙個引數,對於標準而言,第乙個引數是to right,如下:

當然,我們還可以使用任何我們想要的角度,語法如下:

background:linear-gradient(angle,color1,color2,....);

注意,角度如下所示:

2.使用透明度(transparency)

在css3中也支援透明度,可以用於建立減弱變淡的效果。方法很簡單,只需要把顏色使用rgba()來表達即可,rgba的最後乙個值表示不透明度:0表示完全透明,1表示完全不透明。

css3線性漸變

css3漸變有兩種 linear gradient線性漸變和radial gradient徑向漸變。今天看的是linear gradient線性漸變,所以只做線性漸變的總結。w3c標準語法 formal grammar linear gradient to left right top bottom...

css3線性漸變

css3線性漸變 為了建立乙個線性漸變,必須至少定義兩種顏色節點。顏色節點即你想要呈現平穩過渡的顏色。同時,你也可以設定乙個起點和乙個方向 或者乙個角度 語法 background image linear gradient direction,color1,color2 線性漸變 從上到下 預設情...

CSS3線性漸變

css3線性漸變可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。線性漸變 linear gradients 建立乙個線性漸變,必須至少定義兩種顏色節點。顏色節點即你想要呈現平穩過渡的顏色。方向可以是上下 左右或者對角方向,你也可以設定乙個起點和乙個方向 或乙個角度 語法 background li...