通常当我制作渐变时，我会使用colorzilla gradient edtior。
默认情况下，它会为您生成CSS。这是一个例子：
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.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-9 */
虽然这肯定是彻底的，但我很好奇是否有必要。通过反复试验和消除过程，我将其缩减为以下CSS：
background: #1e5799; /* Old browsers */
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-9 */
这种简化的CSS似乎仍然适用于Chrome，Firefox，IE8，IE9和IE10。但是很难说，因为使用Internet Explorer兼容性视图并不总是很好（当我使用IE9我的块工作，但在我升级到IE10并使用IE9兼容性视图后它没有）。我还下载了IETester，并且使用此工具取得了更大的成功。
我很好奇是否有人能够看到我是否遗漏了某些可能在某个案例或其他重要浏览器中破坏的重要CSS，或者我是否可以将其缩小甚至更多。
虽然重要性不是很重要，但它的大小差异很大。
两个块之间的差异为618 bytes，在使用10个渐变的工作表中，差异超过6 KB。正如你所看到的，这可以快速加起来（在缓存和今天的互联网速度之间授予它不是最重要的因素），我仍然认为值得关注。
答案 0 :(得分：2)
是的，渐变语法很乱。好的，这就是......
首先filter：IE9是您需要注意的，特别是如果您将渐变与其他CSS功能结合使用。
旧的IE filter样式基于ActiveX控件，并且出了名的错误，当它们与其他浏览器功能结合使用时，这种情况往往会更糟。 IE9为filter以前用过的大部分内容引入了标准CSS语法;渐变是关于唯一没有成功的特征（当然是唯一重要的特征）。
然而，IE9中用于渐变的ActiveX控件中的那些错误在IE9中比在IE8中更明显，主要是因为它需要比以前更多内置浏览器功能。例如，filter渐变与border-radius不能很好地匹配。它完全杀死了圆角。使用filter样式时，还需要注意许多其他错误。
出于这个原因，许多渐变工具将为您提供IE9的完整替代语法，其中包括创建嵌入为CSS background的数据网址的SVG渐变。它并不漂亮，但它确实比IE9的filter更好，因为它避免了所有filter错误。不幸的是，对于这种技术，如果你还需要支持IE8，那么仍然需要filter语法;但你不希望它在IE9中与SVG风格发生冲突，这意味着CSS黑客或条件评论或其他类似的肮脏。是的，它确实有点混乱。
这就是为什么我诚实的首选解决方案不支持IE8或更早版本中的渐变。问题太多，浏览器特定代码太多，用户数量也在不断增加，值得付出努力。
当我必须支持旧IE中的渐变时，我使用CSS3Pie，这是一个polyfill脚本，增加了对标准CSS渐变语法的支持。这意味着我可以在所有IE版本中使用渐变，而无需担心使用filter。 （它使用VML在幕后执行渐变，但您不必担心实现细节;只需最终结果）。
-ms-前缀：你是对的。这是不必要的，除非你打算支持IE10的预发布版本（当然，任何人使用它们都毫无意义，现在已经升级到真正的IE10）。
两种-webkit-语法：这是因为Webkit在语法最终确定之前引入了该功能。这就是生活在前沿。虽然语法现在已标准化，但我们仍需要提供旧语法，因为在使用旧语法的版本上仍有大量Safari和其他webkit用户。这将随着时间的推移而改变，但它还没有准备好被删除。
-o-前缀：这是Opera浏览器。只是在最新版本中，他们才放弃了对前缀的需求。任何不在最新版本上的用户都需要它。这是您可能影响的用户数量的调用，因此您是否可以放弃它。我认为这可能没问题，因为Opera用户倾向于让他们的浏览器保持最新状态。
-moz-前缀：您现在可以安全地删除它。自v16以来，Firefox不需要前缀。早于现在版本的用户很少非常。 （即使长期支持版本是FF17）。
纯色回落：保持这一点当然。确保您的网站看起来没问题（它不一定非常棒;只是没关系）。这是旧浏览器上用户的保单。是的，这可能包括那些拥有例如旧版Firefox需要你不支持前缀的人。
所以是的，简短的回答是你可以放弃很多;没有你想要的那么多，但肯定有一些。
我会按如下方式编写代码：
background: #1e5799; /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
-pie-background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE6-9 with css3Pie */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
behavior: url(/PIE.htc); /* activate css3Pie in IE6-9 */
我删除了-o-和-moz-前缀，并将filter替换为CSS3Pie代码（您显然需要将PIE.htc添加到您的网站，但只有IE会下载它。）
希望有所帮助。
我还建议查看CanIUse site以获取完整的浏览器支持图表。
答案 1 :(得分：1)
你仍然（截至今天）在Mac OS X和iOS上需要Safari的-webkit-前缀。
对于早期版本的Firefox和Chrome，您还需要-moz- - 和-webkit- - 前缀版本。
“啊哈，”你说，“但那些浏览器现在自动更新！”
“为什么是的，”我回答，带着耐心的微笑，“但不是在他们没有的旧Android手机上。”
-ms-linear-gradient虽然不支持（IE 9不支持CSS渐变，只支持filter和SVG背景，IE 10支持linear-gradient），所以你可以删除它。 （如果你能找到仍然使用Opera的人，你可以问他们对渐变的看法。）
但是，正如我评论的那样：一旦你的CSS被gzip压缩，额外的渐变声明就不会占用太多额外的空间。显然，你可以根据你想要支持的浏览器来平衡大小差异，但我建议你根据 gzipping之后的大小判断，并根据你的观众的浏览器（如果可能的话）判断和目标受众）实际上正在使用。