Question

我正在尝试使用框阴影和渐变交叉浏览来设置div。我正在使用sass＆amp;所以，我尝试实现mixins，它将帮助我产生这种效果，并在我想要的任何地方重复使用它。不幸的是，只显示了渐变。我的div是：

<div class="container" id="logo-bar">
  ......
</div>

我的scss代码是：

    @mixin ie-linear-gradient($start-color, $end-color) {
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#    {$start-color}', endColorstr='#{$end-color}');
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}')"; 
}
    @mixin ie-box-shadow ($color, $direction, $strength) {
      filter: progid:DXImageTransform.Microsoft.shadow(color='#{$color}', Direction=#{$direction}, Strength=#{$strength});
      -ms-filter: "progid:DXImageTransform.Microsoft.shadow(color='#{$color}', Direction=#{$direction}, Strength=#{$strength})";
}

#logo-bar {
  padding:5px 0;
  border-bottom: 1px solid #c0c0c0;
  @include single-box-shadow(#e0e0e0,0px,1px,2px,false,false);
  @include ie-box-shadow(#e0e0e0,90,2);
  background: #fefefe;
  @include background-image(linear-gradient(top, #fefefe, #E6E6E6));
  @include ie-linear-gradient(#fefefe, #E6E6E6);
  min-height:1px; /* for IE 7 to show gradient */
}

Answer 1

不幸的是，您无法以所需的方式使用任何版本的CSS（或css编译器）执行此操作。来自http://www.css3please.com

多个IE过滤器必须在单个声明中以逗号分隔。它们不是在单独的块中添加的。

所以你必须拥有

filter: {{your boxshadow filter}}, {{your gradient filter}};

<强>不

filter: {{your boxshadow filter}};
filter: {{your gradient filter}};

这将是您的CSS将在浏览器端转换为。

与单个规则集中的所有CSS定义一样，最后一个定义的胜利。

我建议创建更多mixins，以期望的方式组合效果。例如，有一个用于boxshadow的mixin，一个用于渐变，一个用于带渐变的boxshadow。不是最优雅的解决方案，但IE似乎没有任何其他可能与CSS。

通过scss mixin将2个微软滤镜用于渐变和阴影

1 个答案: