2 фильтра Microsoft для градиента и тени вместе с помощью Scss Mixin - PullRequest
1 голос
/ 23 марта 2012

я пытаюсь стилизовать div с box-shadow и градиентом перекрестного просмотра.Я использую sass & compass.So, поэтому я пытаюсь реализовать миксины, которые помогут мне создать этот эффект и использовать его везде, где я хочу.К сожалению, показан только градиент.мой 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 */
}

1 Ответ

1 голос
/ 29 марта 2012

К сожалению, вы не можете сделать это с любой версией CSS (или css-компилятором) так, как вы хотите.С http://www.css3please.com

Несколько фильтров IE должны быть разделены запятой в одном объявлении.Они не аддитивны в отдельных блоках.

Таким образом, вы должны иметь

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

, а не

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

, которыеэто то, на что ваш CSS будет переведен в браузер.

Как и во всех определениях CSS в одном наборе правил, победит последний, определенный.

Я бы предложил создать больше миксинов, которые объединяютэффекты в желаемом порядке.Например, есть миксин для boxshadow, один для градиента и один для boxshadow с градиентом.Не самое элегантное решение, но в IE это не представляется возможным, как в любом другом случае с CSS.

...