CSS3跨浏览器线性渐变

前端之家收集整理的这篇文章主要介绍了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部分是可选的,整个表达式不区分大小写。

猜你在找的CSS相关文章