IE上的CSS渐变和阴影

Question

我一直在努力尝试使阴影在IE上正常工作...它们在chrome，safari和Firefox中的效果很好！ 有人对此主题有经验吗？ 我设置了站点，以便您可以看到完整的代码和输出。

测试地点

我正在使用lesscss，所以也许这是我的问题？ 我希望不是！！！ 我也在使用IE CSS3 Fix， 即-css3.htc 。我正在使用的代码如下...我试图在没有htc的情况下执行此操作，但是没有运气..至少htc使我的背景渐变到了在IE中工作...在此之前，它仅显示蓝黑色（默认的Microsoft背景渐变颜色）。

预定义的

.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);
}

无样式

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筛选器之后，我想出了如何获得类似的效果。 我喜欢的角落有点粗糙，但这比以前更近了！

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

.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

我一直在努力尝试使阴影在IE上正常工作...它们在chrome，safari和Firefox中的效果很好！ 有人对此主题有经验吗？”

是的，那很正常。 大多数人不打扰。 记得问问自己， 网站是否需要在每个浏览器中看起来都一样？

如果您确实要这样做，则必须对IE使用渐变过滤器。 将以下样式添加到您的RUNgradient类中：

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

Answer 2

对于它们两者，您都可以使用IE过滤器。

您可以将gradient filter用于渐变，将Shadow filter用于阴影。 渐变滤镜效果很好，阴影滤镜看起来真的很差。

您可以在过滤器的文档中阅读如何使用它们。 但是，如果要自动执行此操作，则需要了解CSS3如何处理过滤器并将渐变转换为IE过滤器渐变。

Answer 3

您需要将这些行添加到样式标签中，以使其在IE中起作用，

filter：progid：DXImageTransform.Microsoft.gradient（GradientType = 0，startColorstr ='＃444444'，endColorstr ='＃222222'）; / * IE6和IE7 * /

-ms-filter：“ progid：DXImageTransform.Microsoft.gradient（GradientType = 0，startColorstr ='＃444444'，endColorstr ='＃222222'）”; / * IE8 * /

示例代码段：

.ms-viewheadertr ms-vhltr {背景：＃222; / 当没有填充渐变时，它将填充颜色 /

背景：-webkit-linear-gradient（＃444，＃222）; / *对于Safari 5.1至6.0 * /

背景：-moz-linear-gradient（＃444，＃222）; / *对于Firefox 3.6至15 * /

背景：-o-linear-gradient（＃444，＃222）; / *对于Opera 11.1至12.0 * /

背景：linear-gradient（＃444，＃222）; / *标准语法* /

filter：progid：DXImageTransform.Microsoft.gradient（GradientType = 0，startColorstr ='＃444444'，endColorstr ='＃222222'）; / * IE6和IE7 * /

-ms-filter：“ progid：DXImageTransform.Microsoft.gradient（GradientType = 0，startColorstr ='＃444444'，endColorstr ='＃222222'）”; / * IE8 * /

}