IE9中的css3文本阴影

Question

有没有一种简单的方法可以让css3 text-shadow在IE9中工作？至少一个文本阴影会很棒。我想最好也支持IE8。我希望有一个简单的jquery插件或.htc文件，它只查看元素的文本阴影css属性，并为IE9实现它。

Answer 1

是的，但不是你想象的那样。根据canouse(一个非常好的资源(的说法，没有支持，也没有polyfill可用于向IE9添加text-shadow支持。然而，IE有自己的专有文本阴影(此处详细介绍(

示例实现，取自他们的网站(在IE5.5到IE9中工作(：

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

为了实现跨浏览器兼容性和代码的未来验证，请记住还要使用CSS3标准text-shadow属性(此处详细介绍(。考虑到IE10已经正式宣布打算放弃对传统dx过滤器的支持，这一点尤为重要。展望未来，IE10+将只支持CSS3标准text-shadow。

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*/

你可以得到非常相似的结果。

Answer 3

尝试CSS生成器。

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

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

Answer 4

我正在寻找一个跨浏览器的文本笔划解决方案，当覆盖在背景图像上时可以工作。我想我有一个解决方案，它不涉及额外的标记，js，可以在IE7-9中工作(我还没有测试过6(，并且不会引起混叠问题。

这是使用CSS3文本阴影的组合，除了IE之外，它有很好的支持(http://caniuse.com/#search=text-shadow(，然后使用过滤器组合进行IE。CSS3文本笔划支持目前很差。

IE过滤器

电热过滤器(http://www.impressivewebs.com/css3-text-shadow-ie/)看起来很糟糕，所以我没有用它。

David Hewitt的回答涉及在多个方向的组合中添加阴影过滤器。不幸的是，ClearType随后被删除，因此我们最终得到了严重别名的文本。

然后，我将useragentman上建议的一些元素与dropshadow过滤器相结合。

组合

这个例子是黑色的文字加上白色的笔划。顺便说一句，我正在使用条件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;
}

Answer 5

我试用了上面提到的过滤器，非常不喜欢它所产生的效果。我也不想使用任何插件，因为它们会降低加载时间，这似乎是一个基本的效果。

在我的案例中，我正在寻找一个模糊度为0px的文本阴影，这意味着阴影是文本的精确复制品，但只是偏移和滞后。使用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/

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-如果元素应该是透明的，只需复制父元素的背景色或让它继承即可。色度过滤器的颜色必须与背景颜色匹配，以修复文本周围的伪影(但在这里必须复制颜色，不能编写inherit(。请注意，我没有缩短dropshadow过滤器-它可以工作，但阴影会被剪切到元素尺寸(大阴影很明显；请尝试将偏移设置为至少4(。

提示：如果您想使用具有透明度的颜色(alpha通道(，请使用#AARGGBB表示法，其中AA代表不透明度的六进制值-从01到FE，因为FF和00也意味着没有透明度，因此没有用。^^只需比rgba表示法低一点，因为阴影不柔和，并且相同的alpha值会显得更暗。；(

一个很好的片段来转换IE的alpha值(JavaScript，只需粘贴到控制台中(：

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

问题：应用阴影后，文本/font的行为类似于图像；放大后会变得像素化和模糊…但这是IE的问题，不是我的问题。

阴影的现场演示：http://jsfiddle.net/12khvfru/2/