如何在IE9中使用dropshadow过滤器时消除文本上的黑色文物

问题描述

下面的图片CSS。我需要一个红色标题与＃f2f2f2阴影。它看起来确定在Chrome和Firefox，但在IE它在每个字母的边缘显示litte黑色的工件。
有更好的方法来创建这个阴影吗？

  h1 {
 color：red; 
 text-shadow：3px 3px 0px＃f2f2f2; 
 filter：progid：DXImageTransform.Microsoft.dropshadow（color =＃f2f2f2，offX = 3，offY = 3）; 
} 
  

解决方案

对于IE9

  h1 {
 color：red; 
 background-color：#cccccc; 
 text-shadow：3px 3px 0px＃f2f2f2; 
 filter：progid：DXImageTransform.Microsoft.Chroma（Color =＃cccccc）
 progid：DXImageTransform.Microsoft.dropshadow（color =＃f2f2f2，offX = 3，offY = 3） 
} 
  

定义背景颜色将防止发生黑色轮廓伪影， DXImageTransform.Microsoft.Chroma作为您的过滤器的一部分将使元素中具有该颜色的任何东西透明。重要的是不要选择与任何内容颜色匹配的背景颜色，否则也会变得透明。

p>

Image CSS below. I need a red color heading with a #f2f2f2 shadow. It look ok in Chrome and Firefox but in IE it show litte black artifacts on the edges of every letter. Is there a better way to make this shadow?

h1 {
  color: red;
  text-shadow: 3px 3px 0px #f2f2f2;  
  filter: progid:DXImageTransform.Microsoft.dropshadow(color=#f2f2f2, offX=3, offY=3);
}

解决方案

You could use a rule like this for IE9

h1 {
  color: red;
  background-color: #cccccc;
  text-shadow: 3px 3px 0px #f2f2f2;  
  filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
          progid:DXImageTransform.Microsoft.dropshadow(color=#f2f2f2, offX=3, offY=3);
}

Defining a background-color will prevent the black outline artifact from occurring, and including the DXImageTransform.Microsoft.Chroma as part of your filter will make anything in the element which has that color transparent. It is important to not choose a background-color which will match any content color, or this will be made transparent as well.

Source

这篇关于如何在IE9中使用dropshadow过滤器时消除文本上的黑色文物的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！