CSS也许使用Compass：跨浏览器渐变

编程问答 2022-04-25

问题描述

|| 我想在CSS（可能是通过Compass）中获得一个渐变，该渐变可以在包括IE7 +在内的所有主要浏览器中使用。有没有一种简便的方法（无需编写大量代码，也无需自定义图像文件）？ 我看了Compass的渐变混合，但不适用于Internet Explorer。 有任何想法吗？ （不必是指南针-我很高兴安装其他东西。） 编辑：我想得到的是一些框架（例如Compass？），该框架生成的代码类似于Blowsie发布的代码，该代码已在各种浏览器上进行了测试。基本上就像我提到的Compass渐变mixin一样，但是具有IE支持。 （我只是对自己的SCSS mixin进行滚动并粘贴到诸如Blowsie的代码之类的块中有些警惕，因为我还没有对其进行测试并且没有足够的资源来这样做。）     

解决方法

我刚刚注意到，当前的Compass beta（0.11.beta.6）支持在指南针/ css3 /图像模块（取代以前的渐变模块）中生成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渐变函数非常有限，因此可能无法实现。     ,我用于所有浏览器渐变的代码。 
            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;
您将需要指定一个height或zoom：1来将hasLayout应用于该元素，以便在其中工作     ,尽管渐变的复杂性有限，但是它们足够复杂，需要您考虑的“大量代码”。 考虑： 起始颜色，结束颜色和在另一种之间转换所需的十六进制数学 “步数” 每步的宽度/高度 由于没有这样做的纯CSS方式，因此意味着呈现HTML（每种颜色/步骤一个元素），而不会弄乱现有的HTML 因此，没有，如果没有一个插件可以为您完成所有这些工作，则将需要一些代码或图像。     
也许使用使用使用浏览器浏览器渐变渐变