欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

CSS设置DIV背景色渐变显示【转】

程序员文章站 2022-06-19 10:22:43
google模式下： ie模式下： 火狐模式下： FILTER（ie模式）；background: moz linear gradient（火狐模式）；background: webkit gradient（谷歌模式）。 以上是为了区别不同浏览器的不同效果，我把色码区别开了。为了兼容所有浏览器的相同 ......
<style type="text/css"> 

.linear{ 
    width:100%; 

    height:600px; 

    filter: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#b8c4cb,endcolorstr=red); /*ie 6 7 8*/ 

    background: -ms-linear-gradient(top, #fff,  #0000ff);        /* ie 10 */

    background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/ 

    background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/ 

    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff));      /* safari 4-5, chrome 1-9*/

    background: -webkit-linear-gradient(top, #fff, #0000ff);   /*safari5.1 chrome 10+*/

    background: -o-linear-gradient(top, #fff, #0000ff);  /*opera 11.10+*/

} 

</style> 

 <body>

<div class="linear"></div>

 </body>

google模式下：

CSS设置DIV背景色渐变显示【转】

ie模式下：

CSS设置DIV背景色渐变显示【转】

火狐模式下：

CSS设置DIV背景色渐变显示【转】

filter（ie模式）；background:-moz-linear-gradient（火狐模式）；background:-webkit-gradient（谷歌模式）。

以上是为了区别不同浏览器的不同效果，我把色码区别开了。为了兼容所有浏览器的相同效果的css3渐变色，你可以把色码调试成一样。

文章来自：

上一篇： 高度塌陷，清除浮动---CSS必备的盒子模型知识！

下一篇： 开机方案题解

推荐阅读