CSS(也许与指南针)：跨浏览器渐变

我想要在每个主要浏览器(包括IE7)中使用CSS(或许通过 Compass)的渐变.有没有一个简单的方法来做(没有写大量的代码,没有自定义的图像文件)？

我看了指南针的gradient mixin,但它并不适用于Internet Explorer.

有任何想法吗？ (它不需要是指南针 – 我很高兴安装别的东西)

编辑：我想要得到的是一些框架(如Compass？),它生成像Blowsie发布的代码,这些代码在浏览器之间进行了测试.基本上像Compass gradient mixin我提到的,但是用IE支持. (我有点担心,只是滚动我自己的SCSS mixin和粘贴在块像Blowsie的代码,因为我没有测试,没有资源这样做.)

解决方法

我刚刚注意到,目前的Compass beta(0.11.beta.6)支持在 compass/css3/images模块中生成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,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,#eeeeee);
  background: -o-linear-gradient(top,#eeeeee);
  background: linear-gradient(top,#eeeeee);
}

我想我会喜欢在一个调用中有IE和非IE渐变代码,但是由于IE的DXImageTransform渐变功能非常有限,这可能是不可能的.