Question

几天前，我读到了这篇文章：http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/

找到了新的CSS3语法repeating-linear-gradient。

到目前为止它只适用于FireFox，即使我使用前缀。

background: #000;
background-image: -webkit-repeating-linear-gradient(-45deg, black, black, #2a2a2a 6px, #2a2a2a 6px);
background-image: -moz-repeating-linear-gradient(-45deg, black, black, #2a2a2a 6px, #2a2a2a 6px);
background-image: -ms-repeating-linear-gradient(-45deg, black, black, #2a2a2a 6px, #2a2a2a 6px);
background-image: -o-repeating-linear-gradient(-45deg, black, black, #2a2a2a 6px, #2a2a2a 6px);
background-image: repeating-linear-gradient(-45deg, black, black, #2a2a2a 6px, #2a2a2a 6px);

我有最新版本的Google Chrome（Version 30.0.1599.101 m）和IE（v9.0.8112.16421）。由于某些公司政策，我无法将IE更新为更高版本。

我做错了吗？

This is my fiddle

Answer 1

您的示例在Firefox（20.0）和Chromium（25.0.1364.160）中可以使用。我改编了MDN - repeating-linear-gradient的例子。我只添加了宽度和高度

#grad3 {
    width: 100px;
    height: 100px;
}

请参阅JSFiddle

当您更改其中一种黑色时，您会看到更好的模式，请参阅修改后的JSFiddle。

Answer 2

IE 8,10的

可以使用：

background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */

IE9不支持CSS Gradient， http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/ 我建议在IE9中使用-pie-gradient来解决这个问题： http://css3pie.com/documentation/supported-css3-features/

您也可以使用http://www.colorzilla.com/gradient-editor/获得更好的结果，

CSS3背景：重复线性渐变

2 个答案: