介面漸變特效 CSS實現 相容IE8

2021-09-26 16:09:28 字數 3542 閱讀 7957

特別注意:裡面的rgb顏色值必須要全寫,不能使用縮寫。

左右:background: -webkit-gradient(linear, 0 0, 0 100%, from(#80c1e7), to(#213c7c));

background: -webkit-linear-gradient(left, #80c1e7, #213c7c);

background: -moz-linear-gradient(left, #80c1e7, #213c7c);

background: -o-linear-gradient(left, #80c1e7, #213c7c);

background: -ms-linear-gradient(left, #80c1e7, #213c7c);

background: linear-gradient(left, #80c1e7, #213c7c);

filter: progid:dximagetransform.microsoft.gradient(gradienttype = 1, startcolorstr = #80c1e7, endcolorstr = #213c7c);

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

background: -webkit-linear-gradient(top, #ffffff, #e8e8e8);

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

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

background: -ms-linear-gradient(top, #ffffff, #e8e8e8);

background: linear-gradient(top, #ffffff, #e8e8e8);

filter: progid:dximagetransform.microsoft.gradient(gradienttype = 0, startcolorstr = #ffffff, endcolorstr = #e8e8e8);

上下:background: -webkit-linear-gradient(top,#ffffff,#f5f5f5);

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

background: -webkit-gradient(linear, top, bottom,from(#ffffff),to(#f5f5f5));

background: linear-gradient(top,#ffffff,#f5f5f5);

background: -ms-linear-gradient(top,#ffffff,#f5f5f5);

filter: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#f5f5f5);

左右:background: -webkit-linear-gradient(left,#41caf4,#5399f6);

background: -moz-linear-gradient(left,#41caf4,#5399f6);

background: -webkit-gradient(linear,left top,right top,from(#41caf4),to(#5399f6));

background: linear-gradient(left,#41caf4,#5399f6);

background: -ms-linear-gradient(left,#41caf4,#5399f6);

filter: progid:dximagetransform.microsoft.gradient(gradienttype=1, startcolorstr=#41caf4, endcolorstr=#5399f6);

ie透明度:

filter:progid:dximagetransform.microsoft.alpha(opacity=50); /*ie6~ie8*/

上面的濾鏡**主要有三個引數,依次是:startcolorstr, endcolorstr, 以及gradienttype。

其中gradienttype=1代表橫向漸變,gradienttype=0代表縱向淅變。startcolorstr=」色彩」 代表漸變漸變起始的色彩,endcolorstr=」色彩」 代表漸變結尾的色彩。

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

其中各個引數的含義如下:

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

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

style用來指定透明區域的形狀特徵:

0 代表統一形狀

1 代表線形

2 代表放射狀

3 代表矩形。

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

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

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

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

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:dximagetransform.microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradienttype=0);

-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:dximagetransform.microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradienttype=0);/*ie8*/

background:red; /* 一些不支援背景漸變的瀏覽器 */

background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));

background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));

background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));

ie相容CSS3漸變寫法

在css3之前要想做背景色漸變就只能採用新增背景的方法,但是隨著css3 linear gradient屬性的出現,就可以避免使用新增背景的方法,從而優化了效能。但是 inear gradient屬性在ie9以下是無效的,但是可以採用ie濾鏡的方法。比如 黑色漸變到白色,如下 gradient ie...

css實現文字漸變並相容IE瀏覽器

css文字漸變寫法 color fff background linear gradient to bottom,fff5b9,f3d380 webkit text fill color transparent webkit background clip text 在ie瀏覽器中不支援這種寫法,可...

CSS3實現文字流光漸變特效

先上個效果圖 下面先上 html部分 日暮蒼山遠,天寒白屋貧。柴門聞犬吠,風雪夜歸人。css部分 其實這是乙個挺簡單的小例子,屬性的作用在這裡就不多說,因為文件都能查的到,我在這裡主要說一說思路。1 linear gradient屬性給文字加乙個線性漸變的背景色 2 transparent 將文字設...