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, #0C93C0, #FFF); 
background-image:    -moz-linear-gradient(top, #0C93C0, #FFF); 
background-image:     -ms-linear-gradient(top, #0C93C0, #FFF); 
background-image:      -o-linear-gradient(top, #0C93C0, #FFF); 
background-image:         linear-gradient(top, #0C93C0, #FFF);
background-image:     -ms-linear-gradient(right, #0c93C0, #FFF); 
background-image:      -o-linear-gradient(right, #0c93C0, #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', endColorStr='#FFFFFF', 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部分是可选的,整个表达式不区分大小写。

翻译自:https://stackoverflow.com/questions/7546638/css3-cross-browser-linear-gradient

转载注明原文:CSS3跨浏览器线性渐变