CSS3跨浏览器线性渐变
以下代码将会是Opera和IE的替代品吗？
background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF)); background-image: -moz-linear-gradient(right, #0C93C0, #FFF); 请注意 ，我testing了以下规则。 所有的浏览器都支持它们。 但他们是垂直渐变。 任何人都可以帮我修改他们水平的？
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-用于Webkit浏览器（Chrome，Safari） -
-moz-用于FireFox -
-o-为歌剧 -
-ms-用于Internet Explorer - 没有完全按照规范的实现的前缀 。
如果你想要一个不同的angular度，请使用top right而不是right 。 如果您想要水平渐变，请使用left或right 。
也可以看看：
- 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)";
filter适用于IE6，IE7（和IE8），而IE8build议使用-ms-filter （必须引用该值）而不是filter 。 有关Microsoft.Gradient更详细的文档可以在以下urlfind： http : //msdn.microsoft.com/zh-cn/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*/ );
您也可以使用ARGB颜色格式，而不是使用RGB HEX颜色。 意思是alpha，FF表示不透明，而00表示透明。 GradientType部分是可选的，整个expression式不区分大小写。
这里有一个例子，它适用于Opera，Internet Explorer和许多其他networking浏览器。 如果浏览器不支持渐变，则会显示正常的背景色。
background: #f2f5f6; background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); background: linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
我从这个网站上偷了这个。 微软在这里build立了自己的发电机。
你有没有尝试Colorzilla的终极CSS渐变发生器 ？
我得到了几乎所有的解决scheme！
/* Safari 4+, Chrome 1-9 */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#FFFFFF)); /* Safari 5.1+, Mobile Safari, Chrome 10+ */ background-image: -webkit-linear-gradient(top, #000000, #FFFFFF); /* Firefox 3.6+ */ background-image: -moz-linear-gradient(top, #000000, #FFFFFF); /* IE 7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', GradientType=0); /* IE 8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', GradientType=0)"; /* IE 10+ */ background-image: -ms-linear-gradient(top, #000000, #FFFFFF); /* Opera 11.10+ */ background-image: -o-linear-gradient(top, #000000, #FFFFFF); /* fallback image background-image: url(images/fallback-gradient.png);*/ /* fallback/image non-cover color */ background-color: #000000;
希望这可能会帮助一些人:)。
罗布W的答案是全面的，同时详细。 因此，我希望在2014年底前提供支持当前浏览器的摘要，同时确保一些向后兼容性，而仅仅是IE6 / 7无法呈现线性渐变和早期Webkit（Chrome1-9，Saf4 -5特殊方式（ -webkit-gradient( linear, left top, left bottom, color-stop( 0, #0C93C0 ), color-stop( 100%, #FFF ) ); ）
标准语法已经从开始的梯度位置改变to direction ，例如background-image: linear-gradient( to bottom, #0C93C0, #FFF );
广泛支持，易于阅读的CSS：
background-color: #8BCCE1; /* fallback color (eg. the gradient center color), if gradients not supported; you could also work with an gradient image, but mind the extra HTTP-Request for older browsers */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#0C93C0, EndColorStr=#FFFFFF )"; /* IE8-9, ColorZilla Ultimate CSS Gradient Generator uses SVG bg image for IE9 */ background-image: -webkit-linear-gradient( top, #0C93C0, #FFF ); /* Chrome10-25, Saf5.1-Saf6, iOS -6.1, Android -4.3 */ background-image: -moz-linear-gradient( top, #0C93C0, #FFF ); /* Fx3.6-15 */ background-image: -o-linear-gradient( top, #0C93C0, #FFF ); /* Op11.10-12.02 */ background-image: linear-gradient( to bottom, #0C93C0, #FFF ); /* W3C, Fx16+, Chrome26+, IE10+, Op12.10+, Saf6.1+ */
一个有意思的事实是，网站上的大多数博客文章和浏览器渐变工具，比如着名的ColorZilla的“ Ultimate CSS渐变生成器 ”，都包括MS供应商 – 前缀-ms-linear-gradient值。
它在Internet Explorer 10 Consumer Preview上支持。 但是，当您包含标准值linear-gradient ， Internet Explorer 10 Release Preview会正确呈现它。
因此，通过包含-ms-linear-gradient和标准方法，使用-ms你实际上只处理了IE10 Consumer Preview，而这个预览在听众中没有任何意义 。
