IE 上的 CSS 渐变和阴影

Question

我一直在竭尽全力让阴影在 IE 上运行......它们在 chrome、safari 和 firefox 中运行良好!有人有这方面的经验吗？我把这个网站放上去，这样你就可以看到完整的代码和输出。

Test Site

我正在使用 lesscss，所以这可能是我的问题？我希望不是!!!我也在使用 IE CSS3 修复程序，ie-css3.htc我正在使用的代码如下...我试图在没有 htc 的情况下执行此操作，但没有运气..至少 htc 让我的背景渐变在 IE 中工作...在它只显示蓝黑色之前，默认的 Microsoft 背景渐变颜色。

predefine.less

.RUNgradient(@COLOR: @CLR1){
  @CLRL:lighten(@COLOR, 10%);
  @CLRD:darken(@COLOR, 10%);
  background-color: @CLRL;
  background-repeat:repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(@CLRL), to(@CLRD));
  background-image: -moz-linear-gradient(top, @CLRL, @CLRD);
  background-image: -ms-linear-gradient(top, @CLRL, @CLRD);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @CLRL), color-stop(100%, @CLRD));
  background-image: -webkit-linear-gradient(top, @CLRL, @CLRD);
  background-image: -o-linear-gradient(top, @CLRL, @CLRD);
  background-image: linear-gradient(top, @CLRL, @CLRD);
  behavior: url(css/ie-css3.htc);
}

styles.less

div.wrapper{
    width:500px;
    margin:25px auto;
    padding: 10px 25px;
    text-align:center;
    .RUNgradient;
    .RUNshadow;
    p{
        font:24px @HEADERFONT;
        color:#ffffff;
        .RUNtextshadow;
    }
}

过滤器就是答案!几乎……

对于渐变，

 filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@CLRL~", EndColorStr="@CLRD~")";

对于阴影，

 filter: ~"progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR~", Strength="@STR~")";

唯一剩下的就是改变方向，使阴影在元素周围可见，而不仅仅是一侧。

解决方案

在研究了 Microsoft Filters 之后，我想出了如何获得类似的效果。根据我的喜好， Angular 落有点粗糙，但这比以前更接近了!

这是我用的影子文件管理器...

.RUNshadow(@BLURRING:10px){
    @SCLR:#111111;
    @DIR:225;
    @DIR2:45;
    @DIR3:135;
    @DIR4:315;
    @STR:4;
  box-shadow: 0px 1px @BLURRING #111111;
  -moz-box-shadow: 0px 1px @BLURRING #111111;
  -webkit-box-shadow: 0px 1px @BLURRING #111111;
  filter: ~"progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR2~", Strength="@STR~")
     progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR~", Strength="@STR~")
     progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR3~", Strength="@STR~")
     progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR4~", Strength="@STR~")";
}

Answer 1

I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject?"

是的，这很正常。大多数人不会打扰。记得问问自己，Do Websites Need To Look Exactly The Same In Every Browser?

如果你真的想要这个，你必须使用 gradient filter对于 IE。将以下样式添加到您的 RUNgradient 类:

filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@CLRL~", EndColorStr="@CLRD~")";