兼容多种浏览器的渐变颜色背景

2024-04-27 14:33:36

字体：大中小

来源：转载

供稿：网友

兼容多种浏览器的渐变颜色背景经常有一些时候需要使用渐变背景，使用长条图片有点太不高大上了，于是自己写了个小例子，兼容多浏览器就要为每一个浏览器写对应的 CSS，太低版本的浏览器只能使用图片做背景。下面是当前五大浏览器对 gradient 的支持Css代码

<styletype="text/css"media="screen">
#gradient{
width:200px;
height:200px;
/*如果浏览器不支持渐变，使用图像作为背景*/
background:url(gradient.jpg);
/*Webkit:Safari4-5,Chrome1-9*/
background:-webkit-gradient(linear,0%0%,0%100%,from(#ff6600),to(#339900));
/*Webkit:Safari5.1+,Chrome10+*/
background:-webkit-linear-gradient(top,#ff6600,#339900);
/*Firefox3.6+*/
background:-moz-linear-gradient(top,#ff6600,#339900);
/*Opera11.10+*/
background:-o-linear-gradient(top,#ff6600,#339900);
/*IE10*/
background:-ms-linear-gradient(top,#ff6600,#339900);
/*IE<10*/
/*注意：这一行必须写在最后*/
FILTER:PRogid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600,endColorStr=#339900);}
</style>