我观看了这个CodePen 演示，其中 CSS3linear-gradient用于制作颜色效果，我linear-gradient在 jsFiddle 尝试了相同的属性，但这个 CSS3 属性在其中不起作用。
这是CodePen 代码，这是我的jsFiddle 代码。
谁能向我解释这背后的问题是什么，或者是否有任何 jsFiddle 错误？
user1680512
问问题
91 次
3 回答
2
当您linear-gradient使用 CodePen 编写代码时，它会自动在代码中添加网站前缀（请参见截图：Firebug 中的 CodePen 代码）。因此，您需要的前缀：
-webkit适用于 Safari、Chrome、Android 浏览器和移动 Safari-moz火狐浏览器-o歌剧-ms适用于 IE 10+
见代码：现场演示
于 2012-11-25T10:26:30.963 回答
2
我建议你使用 colorzilla 渐变生成器来创建渐变。
http://www.colorzilla.com/gradient-editor/
您可以获得适合所有浏览器的代码，只需复制粘贴为您的元素 css 生成的代码。
于 2012-11-25T10:34:47.570 回答
1
查看 Inspector 将帮助您快速轻松地解决此类问题。似乎 CodePen 有某种自动供应商前缀，因为应用于元素的实际样式如下所示：
在 jsFiddle 站点上执行相同操作表明没有应用前缀，因此整个属性不起作用（由警告标志和删除线指示）：
需要前缀：
-webkit对于 Safari、Chrome、Android
-moz对于 Firefox
-o对于 Opera
-ms对于 IE
有关浏览器兼容性，请参阅caniuse
处理这些前缀可能是一个巨大的痛苦，所以你应该看看像less或 js 库这样的预处理器来完成这项工作：prefixfree
于 2012-11-25T10:34:53.053 回答