在IE9中的css3文字阴影

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

是的,但不是你想象的。 根据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

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

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

尝试CSS生成器 。

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

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

我正在寻找一种跨浏览器的文字笔画解决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; } 

我尝试了上面引用的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/

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/