IE9中的css3 text-shadow

Question

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

Answer 1

是的，但不是你想象的那样。 根据caniuse （非常好的资源），没有支持，也没有可用于向IE9添加text-shadow支持的polyfill。 但是， 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 Generator 。

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

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

Answer 4

我正在寻找一种跨浏览器的文本笔划解决方案，当覆盖在背景图像上时可以正常工作。 我认为我有一个解决方案，不涉及额外的标记，js和IE7-9中的工作（我没有测试过6），并且不会导致别名问题。

这是使用CSS3 text-shadow的组合，除了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 ）。 请注意，我没有缩短投影过滤器 - 它可以工作，但阴影会被切割为元素尺寸（大阴影会很明显;尝试将偏移设置为至少4）。

提示：如果要使用透明度（alpha通道）的颜色写入#AARRGGBB表示法 ，其中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);

问题：文本/字体在应用阴影后的行为类似于图像; 放大后它会变得像素化和模糊......但这是IE的问题，而不是我的问题。

这里的影子现场演示： http ： //jsfiddle.net/12khvfru/2/