问IE中的文本-阴影

EN

查看此网站：http://css3pie.com/

这是一个插件，可以让你在IE6-9中使用CSS3

你可以在Internet Explorer中获得文本阴影效果，驯服IE的破旧的滤镜阴影效果，迫使它们看起来正常并停止对文本进行像素化。使用IE色度滤镜：

• 设置一个接近但不同于您的阴影颜色的背景色-例如，对于黑色阴影，深灰色，对于白色发光，浅灰色
• (在样式表或样式规则中设置背景色，在一个仅限IE的类或条件注释内，以不破坏您的设计在每隔一个其他的IE过滤器您的IE过滤器
• 规则设置为相同的颜色作为背景填充
• 它看起来(几乎)相当好！

jsfiddle examples (在IE8中加载，IE9)

...or如果你不能很容易地访问IE8/9，这里有一个在IE9 IE8模式下小提琴的截图。请注意IE默认滤镜中可怕的、充满伪像的、像素化的乱七八糟的滤镜与相当清晰、外观正常的Chroma滤镜的区别。

​

​

CSS代码示例。注意你如何获得一个彩度滤镜，然后是另一个滤镜，都在一行上，用引号引用一个-ms-filter --以及彩度颜色如何精确地匹配背景颜色，以及彩度颜色如何与主效果颜色互补(但不匹配)：

.chroma-glow {
    background-color: #dfdfdf;
    -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Glow(color=ffffff,strength=4)";
}
.chroma-shadow {
    background-color: #dfdfdf;
    -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ffffff)";
}

一些需求(通过艰苦的方式学到的…)

• 元素必须为block或inline-block，不能为position: relative;，不能应用于任何为position: absolute;或的子元素(如果直接应用于
• 或` position: absolute;：relative；`position，则它们有效

​

• 如果你在动态添加滤镜，比如像$elem.css('filter','progid...');这样的jQuery，那么背景颜色就必须直接应用到滤镜元素上，这样色度才能正常工作。这里有几个小贴士：
  • 有效果颜色，应用背景颜色和色度颜色你只需要在IE中使用这个背景颜色，使用feature detection或IE detection.

​