CSS3跨浏览器线性渐变

Question

以下代码的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);

Answer 1

这是一个示例，可与Opera，Internet Explorer和许多其他Web浏览器一起使用。如果浏览器不支持渐变，它将显示正常的背景色。

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%);

我已经从这个网站上偷了这个。微软在这里建立了自己的发电机。

Answer 2

Rob 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 Gradient Generator ”，都包含MS供应商前缀的-ms-linear-gradient值。

从Internet Explorer 10消费者预览版开始支持。但是，当您包括标准值时linear-gradient，Internet Explorer 10 Release Preview会适当地呈现它。

因此，通过包含-ms-linear-gradient和使用标准方式，-ms您实际上可以解决IE10 Consumer Preview，这归结于您的受众中没有人。