CSS3跨浏览器线性渐变

什么是Opera和IE的替代品以下代码？

background-image: -webkit-gradient(linear,right top,left bottom,from(#0C93C0),to(#FFF));
background-image: -moz-linear-gradient(right,#0C93C0,#FFF);

注意，我测试了以下规则。所有浏览器都支持它们。但是它们是垂直梯度。任何人都可以帮助我修改他们为水平的？

background-image: -webkit-linear-gradient(top,#FFF); 
background-image:    -moz-linear-gradient(top,#FFF); 
background-image:     -ms-linear-gradient(top,#FFF); 
background-image:      -o-linear-gradient(top,#FFF); 
background-image:         linear-gradient(top,#FFF);

解决方法

background-image:     -ms-linear-gradient(right,#0c93C0,#FFF); 
background-image:      -o-linear-gradient(right,#FFF);

所有实验的CSS属性都有一个前缀：

> -webkit- for Webkit浏览器(chrome，Safari)
> -moz- for FireFox
> -o- for Opera
> -ms-用于Internet Explorer
>没有完全符合规范的实现的前缀。

使用右上角而不是右边，如果你想要一个不同的角度。如果需要水平渐变，请使用左或右。

也可以看看：

> MDN：linear-gradient

IE浏览器

对于< IE10，您将必须使用：

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0',endColorStr='#FFFFFF',GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0',GradientType=0)";

过滤器适用于IE6，IE7(和IE8)，而IE8推荐使用-ms-filter(必须引用该值)而不是过滤器。
有关Microsoft.Gradient的更详细的文档，请访问：http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx

-ms-filter语法

由于你是IE的粉丝，我将解释-ms-filter语法：

-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
     startColorStr='#0c93c0',/*Start color*/
     endColorStr='#FFFFFF',/*End color*/
     GradientType=0           /*0=Vertical,1=Horizontal gradient*/
);

除了使用RGB HEX颜色，您还可以使用ARGB颜色格式。 A表示α，FF表示不透明，而00表示透明。 GradientType部分是可选的，整个表达式不区分大小写。