CSS IE9 中的 css3 文本阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6905658/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css3 text-shadow in IE9
提问by at.
Is there an easy way to have css3 text-shadow's working in IE9? At least a single text shadow would be great. I guess ideally IE8 is supported as well. I'm hoping there's a simple jquery plugin or .htc file which just looks at text-shadow css property of an element and implements it for IE9.
有没有一种简单的方法可以让 css3text-shadow在 IE9 中工作？至少一个文本阴影会很棒。我想理想情况下也支持 IE8。我希望有一个简单的 jquery 插件或 .htc 文件，它只查看元素的 text-shadow css 属性并为 IE9 实现它。
回答by Moses
Yes, but not how you would imagine. According to caniuse(a very good resource) there is no support and no polyfill available for adding text-shadowsupport to IE9. However, IE has their own proprietary text shadow (detailed here).
是的，但不是你想象的那样。根据caniuse（一个非常好的资源），没有支持，也没有可用于添加text-shadow对 IE9 支持的 polyfill。但是，IE 有自己专有的文本阴影（在此处详细说明）。
Example implementation, taken from their website (works in IE5.5 through IE9):
示例实现，取自他们的网站（适用于 IE5.5 到 IE9）：
p.shadow {
filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}
For cross-browser compatibility and future-proofing of code, remember to also use the CSS3 standard text-shadowproperty (detailed here). This is especially important considering that IE10 has officially announced their intent to drop support for legacy dx filters. Going forward, IE10+ will only support the CSS3 standard text-shadow.
对于跨浏览器兼容性和代码的未来证明，请记住还使用 CSS3 标准text-shadow属性（详细信息请点击此处）。考虑到 IE10 已正式宣布他们打算放弃对旧版 dx 过滤器的支持，这一点尤其重要。展望未来，IE10+ 将仅支持 CSS3 标准text-shadow。
回答by tw16
As IE9 does not support CSS3 text-shadow, I would just use the filter property for IE instead. Live example: http://jsfiddle.net/dmM2S/
由于 IE9 不支持 CSS3 text-shadow，我将只使用 IE 的过滤器属性。现场示例：http: //jsfiddle.net/dmM2S/
text-shadow:1px 1px 1px red; /* CSS3 */
can be replaced with
可以替换为
filter: Shadow(Color=red, Direction=130, Strength=1); /* IE Proprietary Filter*/
You can get the results to be very similar.
您可以获得非常相似的结果。
回答by thom_s
Try CSS Generator.
试试CSS 生成器。
You can choose values and see the results online. Then you get the code in the clipboard.
This is one example of generated code:
您可以选择值并在线查看结果。然后你在剪贴板中得到代码。
这是生成代码的一个示例：
text-shadow: 1px 1px 2px #a8aaad;
filter: dropshadow(color=#a8aaad, offx=1, offy=1);
回答by crdunst
I was looking for a cross-browser text-stroke solution that works when overlaid on background images. think I have a solution for this that doesn't involve extra mark-up, js and works in IE7-9 (I haven't tested 6), and doesn't cause aliasing problems.
我一直在寻找一种跨浏览器的文本笔画解决方案，它可以在叠加在背景图像上时起作用。我想我有一个解决方案，它不涉及额外的标记、js 并且可以在 IE7-9 中工作（我没有测试过 6），并且不会导致别名问题。
This is a combination of using CSS3 text-shadow, which has good support except IE (http://caniuse.com/#search=text-shadow), then using a combination of filters for IE. CSS3 text-stroke support is poor at the moment.
这是使用 CSS3 text-shadow 的组合，除了 IE ( http://caniuse.com/#search=text-shadow)外都有很好的支持，然后使用 IE 的过滤器组合。目前 CSS3 文本笔画支持很差。
IE Filters
IE过滤器
The glow filter (http://www.impressivewebs.com/css3-text-shadow-ie/) looks terrible, so I didn't use that.
发光过滤器（http://www.impressivewebs.com/css3-text-shadow-ie/）看起来很糟糕，所以我没有使用它。
David Hewitt's answerinvolved adding dropshadow filters in a combination of directions. ClearType is then removed unfortunately so we end up with badly aliased text.
David Hewitt 的回答涉及在组合方向上添加阴影过滤器。不幸的是，ClearType 被删除了，所以我们最终得到了严重的别名文本。
I then combined some of the elements suggested on useragentmanwith the dropshadow filters.
然后我将useragentman上建议的一些元素与 dropshadow 过滤器结合起来。
Putting it together
把它放在一起
This example would be black text with a white stroke. I'm using conditional html classes by the way to target IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/).
此示例将是带有白色笔划的黑色文本。我正在使用条件 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;
}
回答by tbradley22
I tried out the filters referenced above and strongly disliked the effect it created. I also didn't want to use any plugins since they'd slow down loading time for what seems like such a basic effect.
我尝试了上面引用的过滤器，但非常不喜欢它产生的效果。我也不想使用任何插件，因为它们会减慢加载时间以获得如此基本的效果。
In my case I was looking for a text shadow with a 0px blur, which means the shadow is an exact replica of the text but just offset and behind. This effect can be easily recreated with jquery.
在我的情况下，我正在寻找具有 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>
This will create an identical effect to the css3 text-shadow below.
这将创建与下面的 css3 text-shadow 相同的效果。
text-shadow: -3px 2px 0px rgba(0, 0, 0, 1.0);
here's a working example (see the large white text over the main banner image) http://www.cb.restaurantconnectinc.com/
这是一个工作示例（请参阅主横幅图像上的大号白色文本）http://www.cb.restaurantconnectinc.com/
回答by Dennis98
The answer of crdunstis pretty neat and the best looking answer I've found but there's no explanation on how to use and the code is bigger than needed.
crdunst的答案非常简洁，也是我找到的最好看的答案，但是没有解释如何使用，并且代码比需要的要大。
The only code you need:
您需要的唯一代码：
#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);
}
First you MUSTspecify a background-color- if your element should be transparent just copy the background-color of the parent or let it inherit. The color at the chroma-filter must match the background-color to fix those artifacts around the text (but here you must copy the color, you can't write inherit). Note that I haven't shortened the dropshadow-filter- it works but the shadows are then cut to the element dimensions (noticeable with big shadows; try to set the offsets to atleast 4).
首先你必须指定一个background-color- 如果你的元素应该是透明的，只需复制父元素的背景颜色或让它继承。色度过滤器的颜色必须与背景颜色匹配以修复文本周围的那些伪影（但在这里你必须复制颜色，你不能写inherit）。请注意，我没有缩短dropshadow-filter- 它可以工作，但阴影会被切割到元素尺寸（大阴影很明显；尝试将偏移量设置为至少 4）。
TIP:If you want to use colors with transparency (alpha-channel) write in a #AARRGGBB notation, where AA stands for a hexadezimal value of the opacity - from 01 to FE, because FF and ironically also 00 means no transparency and is therefore useless.. ^^ Just go a little lower than in the rgba notation because the shadows aren't soft and the same alpha value would appear darker then. ;)
提示：如果您想使用具有透明度（alpha 通道）的颜色，请写在#AARRGGBB 符号中，其中 AA 代表不透明度的十六进制值 - 从 01 到 FE，因为 FF 和具有讽刺意味的是 00 也意味着没有透明度，因此没用.. ^^ 只是比 rgba 符号低一点，因为阴影不柔和，相同的 alpha 值会显得更暗。;)
A nice snippet to convert the alpha value for IE (JavaScript, just paste into the console):
转换 IE 的 alpha 值的一个不错的片段（JavaScript，只需粘贴到控制台中）：
var number = 0.5; //alpha value from the rgba() notation
("0"+(Math.round(0.75 * number * 255).toString(16))).slice(-2);
ISSUES:The text/font behaves like an image after the shadow is applied; it gets pixelated and blurry after you zoom in... But that's IE's issue, not mine.
Live demo of the shadow here: http://jsfiddle.net/12khvfru/2/
问题：应用阴影后，文本/字体的行为类似于图像；放大后它会变得像素化和模糊...但那是 IE 的问题，不是我的。
阴影的现场演示在这里：http: //jsfiddle.net/12khvfru/2/
