2 
<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 上进行多个模糊/阴影/发光的简单方法。

4

3 回答 3

8

相信我，如果你继续使用这个jQuery 插件会更好 （链接不再有效。）。因为，我们尝试过用 CSS 的方式来做这件事，但我们几乎要让它在 IE6/IE7/IE8/FF2/FF3/Safari 中同样工作：DOH：

编辑

作为旁注，我们在所有浏览器中使用CSS和HTML调整来完成这项工作并没有100% 成功；（所以，根据我的说法，脚本是一种可行的方法。你可以尝试我提到的 jQuery 库或者你可以使用 Alexander & Jason 提到的那个。

于 2009-07-22T09:24:34.487 回答
1

jQuery 可以帮助你

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

链接文本

于 2009-07-22T09:27:56.290 回答
1

第一个问题：

你真的要由浏览器来决定阴影是如何渲染的，而且由于浏览器将大部分颜色集中在数字下方，所以你不能轻易地把它变暗。您最初的方法可能是最直接的。如果有的话，我会更详细一点，以确保文本发光均匀分布：

文字阴影：#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 属性的浏览器支持列表，如果这有助于您做出决定：http ://www.quirksmode.org/css/contents.html

Alexander Corotchi 链接到的 jQuery 解决方案实现了可用的 css 解决方案，而无需借助 hack。

编辑：

我一直在考虑这个问题；这里有额外的想法：

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

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

于 2009-08-07T20:44:21.150 回答