在IE9中的css3文字阴影

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

Answer 1

是的，但不是你想象的。 根据caniuse （一个非常好的资源）没有支持和没有polyfill可用于添加text-shadow支持IE9。 但是， IE有他们自己的专有文字阴影（ 详细在这里 ）。

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

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

对于跨浏览器兼容性和代码的未来validation，请记住也使用CSS3标准text-shadow属性（ 在这里详述 ）。 考虑到IE10正式宣布放弃对传统dxfilter的支持，这一点尤为重要。 outlook未来，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生成器 。

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

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

Answer 4

我正在寻找一种跨浏览器的文字笔画解决scheme，可以在叠加在背景图片上时使用。 认为我有一个解决scheme，这不涉及额外的标记，JS和IE7-9（我没有testing6），并不会导致别名问题。

这是一个使用CSS3文字阴影的组合，除了IE（ http://caniuse.com/#search=text-shadow ）之外，还有很好的支持，然后使用IE的filter组合。 现在CSS3文本笔画支持很差。

IE筛选器

辉光filter（ 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

我尝试了上面引用的filter，强烈不喜欢它创build的效果。 我也不想使用任何插件，因为他们会减慢加载时间，看起来像这样一个基本的效果。

在我的情况下，我正在寻找与0px模糊的文字阴影，这意味着阴影是文本的确切副本，但只是抵消和后面。 这个效果可以很容易地用jQuery重新创build。

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

这将创build一个相同的效果，下面的css3文字阴影。

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

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

Answer 6

crdunst的答案是相当整洁，我find了最好看的答案，但没有解释如何使用和代码比需要更大。

唯一的代码你需要：

 #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 – 如果你的元素应该是透明的，只需复制父级的背景颜色或让它inheritance。 色度filter的颜色必须与背景颜色相匹配，以固定文本周围的文物（但是在这里您必须复制颜色，不能inherit ）。 请注意，我没有缩短阴影滤镜 – 它的工作原理，但阴影然后切成元素维度（明显的阴影很大;尝试将偏移设置为至less4）。

提示：如果要使用透明度（alpha通道）的颜色以#AARRGGBB表示法写入，其中AA表示不透明度的hex值 – 从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/