在IE9中如何使用CSS3的文本阴影效果

Question

有没有一种简单的方法让css3 text-shadow 在IE9中工作？至少一个单独的文本阴影会很棒。理想情况下，IE8也能被支持。我希望有一个简单的jQuery插件或.htc文件，它只需查看元素的text-shadow css属性并在IE9中实现它。

- at.

Answer 1

是的，但不是你想象中的那样。根据caniuse（一个非常好的资源），没有支持和补丁可以添加text-shadow支持到IE9。然而，IE有自己专有的文本阴影（详细信息请参见这里）。

以下示例取自他们的网站（适用于IE5.5至IE9）：

p.shadow { 
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}

为了跨浏览器兼容性和代码的未来性，请记住还要使用CSS3标准的text-shadow属性（详见这里）。尤其要注意，考虑到IE10已经正式宣布他们打算放弃对旧版DX滤镜的支持，所以这一点格外重要。从现在开始，IE10+将只支持CSS3标准的text-shadow。

- Moses

---

当你说过滤器在IE10中无法工作时，这是否意味着即使我将浏览器模式更改为IE9，它们也不会起作用？因为在使用浏览器模式IE9的IE10中，这些过滤器都无法正常工作。我应该假设它们会在真正的IE9浏览器上工作吗？ - andrewtweber

@andrewtweber 在browserstack.com上验证一下可能会有意义-- 但是没错，听起来像是IE10引擎完全舍弃了它。在IE9中，选择IE7模式也有一些奇怪的怪癖，比如（即IE7不喜欢console.log()，但ie9在ie7模式下处理得很好）。 - Lotus

我正在使用IE11模拟旧版浏览器。值得一提的是，渲染这些滤镜的功能默认情况下已被停用了吗？ - WoodrowShigeru

Answer 2

由于IE9不支持CSS3的text-shadow属性，因此我会在IE中使用filter属性。实时示例：http://jsfiddle.net/dmM2S/

text-shadow:1px 1px 1px red; /* CSS3 */

可以替换为

filter: Shadow(Color=red, Direction=130, Strength=1); /* IE Proprietary Filter*/

你可以使结果非常相似。

- tw16

---

使用 filter: Shadow(Color=red, Direction=130, Strength=1); /* IE 专有滤镜 */ 会比没有文本阴影效果更糟糕。 - Krzysztof Wołowski

filter: glow(color=black, strength=1) 似乎能够产生更好的效果。 - Neil Sarkar

小心同时指定 filter: Shadow 和 text-shadow，就像在你的 fiddle 中一样。毕竟，IE10将支持 text-shadow，我认为它也支持 filter: Shadow。应用这两个属性的结果可能会很有趣。 - feklee

IE10为了更符合标准，在设计中放弃了对滤镜的支持：http://blogs.msdn.com/b/ie/archive/2011/12/07/moving-to-standards-based-web-graphics-in-ie10.aspx。如果你在IE10中检查这个fiddle，你会发现只有CSS3的`text-shadow`生效。 - tw16

Answer 3

试试CSS生成器。

您可以选择值并在线查看结果，然后将代码复制到剪贴板中。
这是一个生成的代码示例：

text-shadow: 1px 1px 2px #a8aaad;
filter: dropshadow(color=#a8aaad, offx=1, offy=1);

- thom_s

Answer 4

我正在寻找一个跨浏览器的文本描边解决方案，可以在背景图像上叠加使用。我想我有一个解决方案，它不需要额外的标记、js，并且在IE7-9中有效（我没有测试6），也不会导致锯齿问题。

这是使用CSS3 text-shadow的组合，它具有良好的支持，除了IE之外 (http://caniuse.com/#search=text-shadow)，然后使用一些IE的filter组合。目前CSS3 text-stroke的支持很差。

IE Filters

发光滤镜(http://www.impressivewebs.com/css3-text-shadow-ie/)看起来很糟糕，所以我没有使用它。

David Hewitt 的答案涉及到在多个方向上添加dropshadow filters。然而，ClearType被删除了，所以我们最终得到了锯齿状的文本。

然后我将useragentman上建议的一些元素与dropshadow filters相结合。

把它放在一起

这个例子是黑色文本加上白色描边。顺便说一下，我使用了条件html类来针对IE(http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)。

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}

- crdunst

---

+1 这是一个好方法，因为它可以防止未来支持text-shadow的IE版本同时将text-shadow和滤镜应用于同一文本。 - Moses

@Moses：实际上，在这种情况下是不必要的，因为引入text-shadow的IE版本（IE10）也是放弃支持旧的filter样式的版本，因此它们永远不会发生冲突。（但是，对于其他样式来说是必要的--例如，transform在IE9中得到支持，因此可能与执行相同操作的filter样式发生冲突，导致混乱的结果） - Spudley

我找到的最好看的解决方案！ :) - Dennis98

Answer 5

我尝试了上面提到的滤镜，但强烈不喜欢它所产生的效果。我也不想使用任何插件，因为它们会减慢加载时间，而这似乎是一个基本的效果。

在我的情况下，我正在寻找一个文本阴影，其模糊半径为0像素，这意味着阴影是文本的精确复制品，只是被偏移并置于后面。这种效果可以很容易地用jquery重新创建。

<script>
    var shadowText = $(".ie9 .normalText").html();  
    $(".ie9 .normalText").before('<div class="shadow">' + shadowText + '</div>');
</script>
<style>
    .ie9 .shadow { position: relative; top: 2px; left: -3px; }
</style>

这将创建一个与下面的CSS3文本阴影完全相同的效果。

    text-shadow: -3px 2px 0px rgba(0, 0, 0, 1.0);

这里有一个工作示例（请参见主横幅图像上的大白色文本）http://www.cb.restaurantconnectinc.com/

- tbradley22

Answer 6

crdunst的答案非常整洁，是我找到的最好的答案，但没有解释如何使用，而且代码比需要的要大。

你只需要这段代码：

#element {
    background-color: #cacbcf;
    text-shadow: 2px 2px 4px rgba(0,0,0, 0.5);
    filter: chroma(color=#cacbcf) progid:DXImageTransform.Microsoft.dropshadow(color=#60000000, offX=2, offY=2);
}

首先，您必须指定一个background-color - 如果您的元素应该是透明的，只需复制父元素的背景颜色或让它继承。在chroma-filter中的颜色必须与background-color匹配，以修复文本周围的那些伪影（但是在这里，您必须复制颜色，不能写inherit）。请注意，我没有缩短dropshadow-filter - 它可以工作，但阴影会被裁剪到元素尺寸（使用大阴影时会注意到；尝试将偏移量设置为至少4）。

提示：如果您想使用带有透明度（alpha通道）的颜色，请使用#AARRGGBB表示法，其中AA代表不透明度的十六进制值-从01到FE，因为FF和具有讽刺意味的00都表示没有透明度，因此无用.. ^^ 只需比rgba符号稍微低一点，因为阴影不柔和，相同的alpha值看起来会更暗。;)

一个很好的代码片段，用于将alpha值转换为IE（JavaScript，只需粘贴到控制台中）：

var number = 0.5; //alpha value from the rgba() notation
("0"+(Math.round(0.75 * number * 255).toString(16))).slice(-2);

问题：在应用了阴影之后，文本/字体表现得像图像一样；当你放大缩小后会出现像素化和模糊的情况...但这是IE的问题，不是我的问题。

阴影的演示可以在此处查看：http://jsfiddle.net/12khvfru/2/

- Dennis98