css ie6 渐变色为什么不行

html-css09

css ie6 渐变色为什么不行,第1张

1:css3中的渐变属性不支持IE678。

2:如果你想要支持css3中有些属性支持IE低版本浏览器,需要到网上找一个插件。

3:这个插件也只不过支持部分新增的css3属性。所以建议你别费这个精力。

4:IE低版本浏览器淘汰是趋势,现在淘宝都将不支持IE8版本。

5:对于以上有什么不理解或者不正确的请追问指正出来,

6:望采纳

#gradient {

/* Firefox*/

background-image: -moz-linear-gradient( top, #81a8cb, #4477a1 ) 

/* Safari & Chrome */

background-image: -webkit-gradient(linear , left bottom , left top , color-stop( 0, #4477a1 ) , 

color-stop( 1, #81a8cb )) 

/* IE6 & IE7 */

filter: progid:DXImageTransform.Microsoft.gradient( GradientType= 0 , startColorstr = '#81a8cb', 

endColorstr = '#4477a1' ) 

/* IE8 */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#81a8cb', 

endColorstr = '#4477a1' )" 

}

文档上只提供2个颜色,所以我们也拿它没办法。但是想提醒一下,使用渐变无论哪个浏览器对其性能都是影响很大的。fixed 圆角 投影 渐变这是最影响浏览器性能的几个css属性

CSS3渐变

渐变.html   文件代码清单如下:

<!doctype html>

<html lang="zh">

    <head>

        <meta charset="utf-8">

        <title>渐变</title>

        <link rel="stylesheet" href="gradient.css">

    </head>

    <body>

        <div id="radial"></div>    /* 径向渐变 */

        <div id="linear"></div>    /* 线型渐变 */

    </body>

</html>

gradient.css   文件代码清单如下:

div {

width: 500px

height: 300px

}

#radial {

background: -moz-radial-gradient(circle, rgb(255, 0, 0),rgb(0, 0, 255))  /* Firefox */

background: -webkit-radial-gradient(circle, rgb(255, 0, 0),rgb(0, 0, 255)) /* Safari Chrome */

background: -ms-radial-gradient(circle, rgb(255, 0, 0),rgb(0, 0, 255))    /* IE */

background: -o-radial-gradient(circle, rgb(255, 0, 0),rgb(0, 0, 255))     /* Opera*/

}

#linear {

background: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(0, 0, 255))  /* Firefox */

background: -webkit-linear-gradient(top, rgb(255, 255, 255), rgb(0, 0, 255))  /* Safari Chrome */

background: -ms-linear-gradient(top, rgb(255, 255, 255), rgb(0, 0, 255))   /* IE */

background: -o-linear-gradient(top, rgb(255, 255, 255), rgb(0, 0, 255))    /* Opera*/

}