CSS(可能与Compass):跨浏览器渐变

Question

我想在CSS中获得一个渐变(可能通过Compass),它适用于所有主流浏览器,包括IE7 +.有没有一种简单的方法可以做到这一点(没有编写大量代码,没有自定义图像文件)？

我查看了Compass的梯度mixin,但它不适用于Internet Explorer.

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

编辑:我想要得到的是一些框架(如Compass？),它生成的代码类似于Blowsie发布的已经过浏览器测试的代码.基本上就像我提到的Compass梯度mixin,但有IE支持.(我有点担心只是滚动我自己的SCSS mixin并粘贴像Blowsie的代码这样的块,因为我没有测试它并且没有资源这样做.)

Answer 1

我刚刚注意到目前的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, 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渐变函数非常有限,这可能是不可能的.