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_test を取得しようとしています。誰にもアイデアはありますか？

また...すべてのブラウザ、または少なくともIE7、IE8、および古いFirefoxでほぼ同じに見えるようにしたい。誰でもこれにアプローチする最善の方法を知っています。フィルターを使用して IE で複数のブラー/シャドウ/グローを行う簡単な方法がわかりませんでした。

4

3 に答える 3

8

信じてください、このjQuery プラグイン を先に進めた方が良いでしょう(リンクは無効です) . なぜなら、私たちはCSSの方法でそれをやろうとしていたからです.IE6 / IE7 / IE8 / FF2 / FF3 / Safariでも同じように動作させようとしてほとんど死んでいました:DOH:

編集

余談ですが、すべてのブラウザーでCSSとHTMLの微調整を使用してこの作業を100% 成功させたわけではありません;( したがって、私によると、スクリプトを使用する方法があります。前述の jQuery ライブラリーを試すことができます。または、アレクサンダーとジェイソンが言及したものを使用できます。

于 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

最初の質問:

影がどのようにレンダリングされるかを決定するのは本当にブラウザーのなすがままであり、ブラウザーはほとんどの色を数値のすぐ下に集中させているため、それを暗くするために簡単にできることはあまりありません。あなたの最初のアプローチはおそらく最も簡単です。どちらかといえば、テキストのグローが均等に分散されるように、もう少し冗長になります。

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;

2番：

text-shadow css2 プロパティは、IE や Firefox (3.5 より前) を含むいくつかのブラウザーではサポートされていません。これらのブラウザーで動作させるためのハックがありますが、常にきれいであるとは限りません。

IE フィルタ プロパティを使用して、IE のサポートを追加できます。ここにまともなチュートリアルがあります: http://kilianvalkhof.com/2008/design/almost-cross-browser-text-shadow/

古いバージョンの Firefox のサポートは、作成した回避策を Safari から非表示にする必要があるため、非常に複雑です。これが問題である場合、私はおそらく何かを提案することができます.

css プロパティのブラウザー サポートのリストを以下に示します。

Alexander Corotchi がリンクしている jQuery ソリューションは、ハックに頼らずに利用可能な css ソリューションを実装しています。

編集：

私はこれについてもう少し考えてきました。ここに追加の考えがあります：

本当の問題は、text-shadow プロパティを使用して css3-spec の text-outline プロパティ (まだどのブラウザにも実装されていない) の効果を再現しようとしていることです。text-outline プロパティを待つことができない限り、思いついた解決策はおそらく理想的とは言えません。

ただし、アルファ チャネルの png を作成し、追加のマークアップ (または JavaScript) を使用して各文字の背景にすることは可能かもしれません。テキストのサイズを慎重に制御する必要がありますが、それは可能なクロスブラウザー ソリューションになる可能性があります (アルファ透過性を十分にサポートしていない IE6 を除く)。

于 2009-08-07T20:44:21.150 に答える