1

几天前我读了这篇文章：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 更新到更高版本。

难道我做错了什么？

这是我的小提琴

4

2 回答 2

0

您的示例在 Firefox (20.0) 和 Chromium (25.0.1364.160) 中确实有效。我改编了MDN 中的示例 - repeating-linear-gradient。我只添加了宽度和高度

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

见JSFiddle

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

于 2013-10-31T08:59:24.893 回答
0

对于 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 Gradiant， http: //css3wizardry.com/2010/10/29/css-gradients-for-ie9/ 我推荐使用 -pie-gradiant 解决 IE9 中的问题：http: //css3pie.com/documentation /supported-css3-features/

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

于 2013-10-31T09:00:33.547 回答