首页 > 代码库 > CSS3之firefox&safari背景渐变之争 - [前端技术][转]

CSS3之firefox&safari背景渐变之争 - [前端技术][转]

Firefox浏览器下的渐变背景  Firefox3.6

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


chrome/Safari浏览器下的渐变背景实现   Safari4
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));

综合 – 兼容性的渐变背景效果
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)));

-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值), [color-stop(位置偏移-小数,停靠颜色值),...],to(结束颜色值));

 

CSS3之firefox&safari背景渐变之争 - [前端技术][转]