Question

<html>
<body>
    <style type='text/css'>
        body {
            font: 100% myriad, arial, sans-serif;
            font-size: 12px;
            color:white; 
            font-weight:bold;
        }
        .shadowtext {
            text-shadow:-0.1em 0 0.1em #626262, 0.1em 0 0.1em #626262, 0 -0.1em 0.1em #626262, 0 0.1em 0.1em #626262;
        }
        .shadowtext_text {
            text-shadow:0 0 0.3em #000
        }
    </style>
    <DIV class="shadowtext">0 %</DIV>   
    <DIV class="shadowtext">10 %</DIV>  
    <DIV class="shadowtext">25 %</DIV>  
    <DIV class="shadowtext">95 %</DIV>  
    <DIV class="shadowtext">0123456789</DIV> <br>
    <DIV class="shadowtext_text">0 %</DIV>  
    <DIV class="shadowtext_text">10 %</DIV> 
    <DIV class="shadowtext_text">25 %</DIV> 
    <DIV class="shadowtext_text">95 %</DIV> 
    <DIV class="shadowtext_test">0123456789</DIV>   
</body>
</html>

我试图让shadowtext_test模仿shadowtext文本阴影的外观，而不是过于复杂的长度。有人有什么想法吗？

另外......我希望它在所有浏览器上看起来都一样，或者至少IE7，IE8和更老的Firefox。任何人都知道解决这个问题的最佳方法。我没有看到使用过滤器在IE上进行多次模糊/阴影/发光的简单方法。

Answer 1

请相信我，如果你继续这个jQuery plugin （链接不再有效。）会更好。因为，我们尝试过以CSS方式进行操作，而我们几乎已经死了，试图让它在IE6 / IE7 / IE8 / FF2 / FF3 / Safari中同样工作：DOH：

修改

作为一个旁注，我们使用 CSS 和 HTML 100％成功 >在所有浏览器中调整;（因此，根据我的说法，脚本编写是一种方法。您可以尝试我提到的jQuery库，或者您可以使用Alexander和Jason提到的那个。

Answer 2

jQuery可以帮助你

http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/

link text

Answer 3

第一个问题：

你真的受浏览器的支配来决定如何渲染阴影，并且由于浏览器将大部分颜色都集中在数字下面，所以你可以轻松地将它变暗。您最初的方法可能是最直接的。如果有的话，我会更加冗长以确保文本发光均匀分布：

text-shadow: #777 0 0 0.1em, #777 0 1px 0.1em, #777 1px 1px 0.1em, #777 0 1px 0.1em, #777 -1px 1px 0.1em, #777 -1px 0 0.1em, #777 -1px -1px 0.1em, #777 0 -1px 0.1em, #777 1px -1px 0.1em;

第二

多个浏览器不支持text-shadow css2属性，包括IE或Firefox（3.5之前）。有些黑客可以让它在这些浏览器中运行，但它们并不总是很漂亮。

您可以使用IE过滤器属性添加对IE的支持;这是一个不错的教程：http://kilianvalkhof.com/2008/design/almost-cross-browser-text-shadow/

支持旧版本的Firefox非常棘手，因为您创建的任何解决方法都需要在Safari中隐藏。如果这是一个问题，我可能会提出一些建议。

以下是css propoerties的浏览器支持列表，如果这有助于您做出决定：http://www.quirksmode.org/css/contents.html

Alexander Corotchi链接到的jQuery解决方案实现了可用的css解决方案，而无需诉诸黑客。

修改

我一直在考虑这个问题;这是另外的想法：

真正的问题是您正在尝试使用text-shadow属性来重新创建css3-spec text-outline属性的效果（尚未由任何浏览器实现）。除非你可以等待text-outline属性，否则你提出的任何解决方案都可能不太理想。

但是，有可能创建一个alpha通道png，然后使用额外的标记（或javascript）使其成为每个角色的背景。您必须仔细控制文本的尺寸，但这可能是一种可能的跨浏览器解决方案（IE6除外，它不能很好地支持Alpha透明度）。

复杂的CSS Text-Shadow和跨浏览器兼容性

3 个答案:

修改