CSS3线性渐变不起作用

Question

我观看了this CodePen演示，其中CSS3 linear-gradient用于制作颜色效果，我在jsFiddle尝试了相同的linear-gradient属性，但这个CSS3属性不能正常工作。

以下是CodePen code，这是我的jsFiddle code。

任何人都可以解释一下这背后的问题是什么，或者是否有任何jsFiddle错误？

Answer 1

当您在CodePen中编写linear-gradient时，会自动在代码中添加网站前缀（请参阅屏幕截图：Firebug中的CodePen代码）。那么，你需要的前缀：

适用于Safari，Chrome，Android浏览器和移动版Safari的
• -webkit
• -moz for Firefox
• -o for Opera
• -ms for IE 10 +

请参阅代码： LIVE DEMO

Answer 2

我建议你使用colorzilla渐变生成器来创建渐变。

http://www.colorzilla.com/gradient-editor/

您可以获得适合所有浏览器的代码，只需复制粘贴生成的元素css代码即可。

Answer 3

查看Inspector将帮助您快速轻松地解决此类问题。 似乎CodePen有一些自动供应商前缀，因为应用于元素的实际样式如下所示：

在jsFiddle网站上执行相同的操作表明没有应用前缀，因此整个属性不起作用（由警告标志和删除线指示）：

需要的前缀： 适用于Safari，Chrome，Android的-webkit Firefox的-moz Opera的-o IE的-ms

有关浏览器兼容性，请参阅caniuse

处理这些前缀可能是一个巨大的痛苦，所以你应该看看像less或js库这样的预处理器：prefixfree