Question

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

Answer 1

是的，但不是你想象的那样。根据{{3}}（一个非常好的资源），没有支持，也没有可用于向IE9添加text-shadow支持的polyfill。但是， IE有自己的专有文字阴影（caniuse）。

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

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

对于跨浏览器兼容性和面向未来的代码，请记住还要使用CSS3标准text-shadow属性（detailed here）。考虑到IE10正式宣布了detailed here的意图，这一点尤为重要。展望未来，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's answer涉及在方向组合中添加阴影滤镜。然后遗憾地删除了ClearType，因此我们最终得到了错误的别名文本。

然后我将useragentman上建议的一些元素与投影阴影过滤器结合起来。

将它们放在一起

此示例为带有白色笔划的黑色文本。我正在使用条件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-filter - 它可以工作，但阴影会被切割为元素尺寸（大阴影会很明显;尝试将偏移设置为至少4）。

提示：如果您想使用透明度（alpha-channel）的颜色，请使用 #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/

IE9中的css3 text-shadow

6 个答案: