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

原文由 Tural Ali 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

• -webkit- 适用于 Webkit 浏览器（chrome、Safari）
• -moz- 用于火狐
• -o- 用于 Opera
• -ms- 用于 Internet Explorer
• 完全符合规范的实现 _没有前缀_。

如果您想要不同的角度，请使用 top right 而不是 right 。如果您想要水平渐变，请使用 left 或 right 。

也可以看看：

• MDN： linear-gradient

IE浏览器

对于

 /*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），而 IE8 建议使用 -ms-filter （必须引用该值）而不是 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 表示 alpha，FF 表示不透明，而 00 表示透明。 GradientType 部分是可选的，整个表达式不区分大小写。

原文由 Rob W 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 Consumer Preview 开始支持它。但是，当您包含标准值 linear-gradient 时， Internet Explorer 10 Release Preview 会适当地呈现它。

因此，通过包含 -ms-linear-gradient 和标准方式，以及 -ms 您实际上只是针对 IE10 消费者预览版，这归结为您的受众中 没有人。

原文由 Volker E. 发布，翻译遵循 CC BY-SA 3.0 许可协议