internet-explorer - IE 中带有文本阴影的透明文本

Question

当 color: rgba(255,255,255,0.0); 与 text-shadow: 0px 0px 2px rgba(255,255,255,1); 结合使用时，Internet Explorer 似乎从文本本身继承text-shadow的透明度，导致阴影根本不出现。

JSFiddle 示例(在 IE 中查看): http://jsfiddle.net/495dZ/1/

是否有巧妙的伪类技术来解决这个问题？或者可能使用 jQuery 来达到类似的效果？

Answer 1

您可以将文本隐藏在窗口/屏幕的边缘，也可以考虑为旧版本的 IE 添加后备。

Working Example

.black-box {
    background: url(http://i44.tinypic.com/2rzwis3.jpg) no-repeat;
    padding: 20px;
}
span.shadow {
    font: 20px Arial;
    position: absolute;
    left:-100px;
    top:-100px;
    color: rgba(0, 0, 0, 1);
    text-shadow: 120px 120px 2px rgba(255, 255, 255, 1);
}

<!--[if lte IE 9]>
    <style>
    span.shadow {
        position: static;
        display:inline-block;
        font: 20px Arial;
        color: rgba(255, 255, 255, 1);
        filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=2.25);
        }
    </style>
<![endif]-->

<div class="black-box"> 
    <span class="shadow">This is some text.</span>
</div>