Question

当我将以下内容附加到div时，我在IE中得到一个带渐变和盒子阴影的框：

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#D08080', EndColorStr='#E7A292') progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=170, Color='#B8B8B8');

然而，当我正在做阴影滤镜时，我正在对div内的文本进行阴影处理。除了使用常量颜色设置过滤渐变的明显（和丑陋）黑客之外，如何在所有版本的IE中获得一个简单的div来影响自身而不是它的文本？

Answer 1

IE的过滤器总是一个丑陋的黑客，可能很难正确，并且经常导致奇怪的错误。我的建议是尽可能避免使用它们。

请仔细查看CSS3Pie以解决问题。

CSS3Pie是IE的一个黑客，它允许它使用标准的CSS属性而不是filter来表示渐变和框阴影。它也border-radius。

我希望它能解决你的问题。

Answer 2

在没有CSSPie的IE中有一种方法。 IE 7中的问题＆amp; 8是要应用阴影的元素，需要具有背景颜色集。否则阴影将由子元素（包括文本）继承。

这就是我实现跨浏览器框阴影的方法。这适用于IE 7-10，All Chrome＆amp;我曾尝试过的FF版本和Safari也是如此。忽略我的颜色选择，显然你需要将它们设置为适用于你页面的任何颜色。

.wrapper {
border: solid 1px #A7A7A7;
background-color:#ffffff;/*transparent won't work*/
}

.shadow {
-moz-box-shadow: 2px 2px 3px #A7A7A7;
-webkit-box-shadow: 2px 2px 3px #A7A7A7;
box-shadow: 2px 2px 3px #A7A7A7;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7');
}

然后将这两个类应用于父元素

<div class="wrapper shadow">
   <div id="someInnerDiv">
      <p>Some text that used to inherit the box-shadow, but doesn't anymore</p>
   strong text</div>
</div>

IE过滤器 - 暗影作用于文本;渐变+阴影在盒子上行动？

2 个答案: