css實現背景漸變色效果

2022-01-24 10:30:42 字數 1234 閱讀 4273

webkit核心的瀏覽器,例如(chrome,safari等)

background:-webkit-gradient(linear,0 0,0 100%,from(#000000),to(#ffffff));

第乙個引數表示漸變型別(type),可以是linear(線性漸變)或者radial(徑向漸變);

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

第四個和第五個引數,分別是起始點顏色和終點顏色;

firefox瀏覽器

background: -moz-linear-gradient(#000000, #ffffff);

第乙個引數表示線性漸變的方向,top是從上到下、left是從左到右,如果定義成left top,那就是從左上角到右下角。

第二個和第三個引數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的引數,表示多種顏色的漸變。

線性的(-moz-linear-gradient)和放射狀的(-moz-radial-gradient).

opera瀏覽器

類似於firefox

background: -o-linear-gradient(#000000, #ffffff);

ie瀏覽器(相容性問題很噁心,此處僅供參考)

ie濾鏡

filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=0,finishx=50,finishy=50)

opacity 表示透明度,預設的範圍是從0 到 100,他們其實是百分比的形式。也就是說,0代表完全透明,100代表完全不透明。

finishopacity 是乙個可選引數,如果想要設定漸變的透明效果,就可以使用他們來指定結束時的透明度。範圍也是0 到 100。

style用來指定透明區域的形狀特徵:0 代表統一形狀,1 代表線形,2 代表放射狀,3 代表矩形。

startx 漸變透明效果開始處的 x座標。

starty 漸變透明效果開始處的 y座標。

finishx 漸變透明效果結束處的 x座標。

finishy 漸變透明效果結束處的 y座標。

使用css實現漸變色背景

線性漸變 放射性漸變 語法 linear gradient to bottom,colorstrat,colorend 引數含義 第乙個引數指定 漸變的方向 to bottom 從上至下 to bottom right 從左上至右下 to right 從左至右 to up right 從左下至右上 ...

背景及漸變色

範圍內平鋪 background repeat repeat x 橫行平鋪一行 background repeat repeat y 豎向平鋪一列 background repeat no repeat 無平鋪效果 背景相關的所有屬性都寫在一行 background red url image do...

CSS樣式 漸變色

background linear gradient 實現漸變色,這裡使用background屬性中的linear gradient 線性漸變 值 這都好理解,就後面這個值的屬性不好理解。首先,第乙個值是angle或者point,也就是角度或者方向。意思你要實現從什麼到什麼的漸變色。單位為deg d...