CSS（可能带有指南针）：跨浏览器渐变

我想在CSS中获得一个渐变（可能是通过），它可以在所有主流浏览器中使用，包括IE7+。有没有一种简单的方法可以做到这一点（无需编写大量代码，也无需自定义图像文件）

我看了指南针，但它不适用于Internet Explorer

有什么想法吗？（它不需要是指南针——我很乐意安装其他东西。）

---

编辑：我想得到的是一个框架（比如Compass？），它可以生成类似Blowsie发布的代码，这些代码已经过浏览器测试。基本上就像我提到的，但是有IE的支持。（我有点谨慎，只需滚动我自己的SSCS MIXIN和粘贴在像Blowsie的代码块，因为我没有测试它，没有资源这样做。）< /P> < P>虽然梯度是有限的复杂性，它们足够复杂，需要你所考虑的“很多代码”。 考虑：

• 开始颜色、结束颜色以及在一种颜色和另一种颜色之间转换所需的十六进制数学
• “步骤”的数量
• 每个台阶的宽度/高度
• 由于没有纯CSS的方法来实现这一点，它意味着呈现HTML，每个颜色/步骤一个元素，而不会弄乱现有的HTML

---

因此，不，如果没有一个插件为您完成所有这些，它将需要一些代码或图像。

我用于所有浏览器渐变的代码

            background: #0A284B;
            background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
            background: -moz-linear-gradient(top, #0A284B, #135887);
            background: -o-linear-gradient(#0A284B, #135887);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
            zoom:1;

---

您需要指定高度或缩放：1才能将hasLayout应用于元素，以便在ie中工作。我刚刚注意到，当前的Compass beta（0.11.beta.6）支持在模块中生成ie渐变（它取代了以前的渐变模块），因此您可以总共使用两个短命令生成渐变：

@import "compass/css3/images";
@import "compass/utilities/general/hacks";  /* filter-gradient needs this */

.whatever {
  /* IE; docs say this should go first (or better, placed in separate IE-only stylesheet): */
  @include filter-gradient(#aaaaaa, #eeeeee);
  /* Fallback: */
  background: #cccccc;
  /* CSS 3 plus vendor prefixes: */
  @include background(linear-gradient(top, #aaaaaa, #eeeeee));
}

这将生成以下大量CSS：

.whatever {
  *zoom: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE')";
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE');
  background: #cccccc;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #eeeeee));
  background: -moz-linear-gradient(top, #aaaaaa, #eeeeee);
  background: -o-linear-gradient(top, #aaaaaa, #eeeeee);
  background: linear-gradient(top, #aaaaaa, #eeeeee);
}

---

我想我更愿意在一次调用中使用IE和非IE渐变代码，但由于IE的DXImageTransform渐变函数非常有限，这可能是不可能的。

事实上，我认为您不必为此使用HTML代码。例如，请参阅，以了解执行此操作的方法。（这对我来说太冗长了，所以我正在寻找一种用CSS框架编程实现的方法。）我想说的是，没有简单的答案。你想要一个，但是没有。这并不意味着我的答案值得投反对票。很公平，尽管“没有纯CSS的方式来做这件事”是不正确的（CSS 3支持渐变）——建议生成HTML（或使用JS），而不是为那些不支持它的浏览器编写额外的CSS，这是一个值得怀疑的建议，在我看来。更新：你不应该在IE6-IE8上做渐变，因为它们会导致性能和布局问题。因此，这些天我可能会省略

过滤器渐变

行。-那么你对IE渐变、图像做什么？只是一个单色背景（上面的“后退”行）。@JitendraVyas添加

$svg实验支持：true