有没有一种简单的方法让css3 text-shadow
在IE9中工作?至少一个单独的文本阴影会很棒。理想情况下,IE8也能被支持。我希望有一个简单的jQuery插件或.htc文件,它只需查看元素的text-shadow css属性并在IE9中实现它。
有没有一种简单的方法让css3 text-shadow
在IE9中工作?至少一个单独的文本阴影会很棒。理想情况下,IE8也能被支持。我希望有一个简单的jQuery插件或.htc文件,它只需查看元素的text-shadow css属性并在IE9中实现它。
是的,但不是你想象中的那样。根据caniuse(一个非常好的资源),没有支持和补丁可以添加text-shadow
支持到IE9。然而,IE有自己专有的文本阴影(详细信息请参见这里)。
以下示例取自他们的网站(适用于IE5.5至IE9):
p.shadow {
filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}
为了跨浏览器兼容性和代码的未来性,请记住还要使用CSS3标准的text-shadow
属性(详见这里)。尤其要注意,考虑到IE10已经正式宣布他们打算放弃对旧版DX滤镜的支持,所以这一点格外重要。从现在开始,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*/
你可以使结果非常相似。
filter: Shadow
和 text-shadow
,就像在你的 fiddle 中一样。毕竟,IE10将支持 text-shadow
,我认为它也支持 filter: Shadow
。应用这两个属性的结果可能会很有趣。 - feklee试试CSS生成器。
您可以选择值并在线查看结果,然后将代码复制到剪贴板中。
这是一个生成的代码示例:
text-shadow: 1px 1px 2px #a8aaad;
filter: dropshadow(color=#a8aaad, offx=1, offy=1);
我正在寻找一个跨浏览器的文本描边解决方案,可以在背景图像上叠加使用。我想我有一个解决方案,它不需要额外的标记、js,并且在IE7-9中有效(我没有测试6),也不会导致锯齿问题。
这是使用CSS3 text-shadow的组合,它具有良好的支持,除了IE之外 (http://caniuse.com/#search=text-shadow),然后使用一些IE的filter组合。目前CSS3 text-stroke的支持很差。
IE Filters
发光滤镜(http://www.impressivewebs.com/css3-text-shadow-ie/)看起来很糟糕,所以我没有使用它。
David Hewitt 的答案涉及到在多个方向上添加dropshadow filters。然而,ClearType被删除了,所以我们最终得到了锯齿状的文本。
然后我将useragentman上建议的一些元素与dropshadow filters相结合。
把它放在一起
这个例子是黑色文本加上白色描边。顺便说一下,我使用了条件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;
}
text-shadow
的IE版本(IE10)也是放弃支持旧的filter
样式的版本,因此它们永远不会发生冲突。(但是,对于其他样式来说是必要的--例如,transform
在IE9中得到支持,因此可能与执行相同操作的filter
样式发生冲突,导致混乱的结果) - Spudley我尝试了上面提到的滤镜,但强烈不喜欢它所产生的效果。我也不想使用任何插件,因为它们会减慢加载时间,而这似乎是一个基本的效果。
在我的情况下,我正在寻找一个文本阴影,其模糊半径为0像素,这意味着阴影是文本的精确复制品,只是被偏移并置于后面。这种效果可以很容易地用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>
text-shadow: -3px 2px 0px rgba(0, 0, 0, 1.0);
这里有一个工作示例(请参见主横幅图像上的大白色文本)http://www.cb.restaurantconnectinc.com/
crdunst的答案非常整洁,是我找到的最好的答案,但没有解释如何使用,而且代码比需要的要大。
你只需要这段代码:
#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
- 如果您的元素应该是透明的,只需复制父元素的背景颜色或让它继承。在chroma-filter中的颜色必须与background-color匹配,以修复文本周围的那些伪影(但是在这里,您必须复制颜色,不能写inherit
)。请注意,我没有缩短dropshadow-filter - 它可以工作,但阴影会被裁剪到元素尺寸(使用大阴影时会注意到;尝试将偏移量设置为至少4)。
提示:如果您想使用带有透明度(alpha通道)的颜色,请使用#AARRGGBB表示法,其中AA代表不透明度的十六进制值-从01到FE,因为FF和具有讽刺意味的00都表示没有透明度,因此无用.. ^^ 只需比rgba符号稍微低一点,因为阴影不柔和,相同的alpha值看起来会更暗。;)
一个很好的代码片段,用于将alpha值转换为IE(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/