0

シャドウを使用してテキストのアウトラインを作成しようとしています - 他のスタックオーバーフロースレッドから得た解決策です。現在、text-outline と text-stroke はほとんどサポートされていません。

文字の 1 つで奇妙な動作が発生しています。

私が行ったシャドウハックを使用するには：

<div id="background">
 <h1 id="buzz-joy">BU<span id="small-raised-z">Z</span>Z-JOY</h1>
</div>

と

#background {
    height 100px;
    text-align: center;
    background-color: grey;
}
#buzz-joy {
    font-family:"Arial Black";
    color: Yellow;
    font-size:4em;
    display: inline-block;
    text-shadow: 2px 2px 0 black, 2px -2px 0 black, -2px 2px 0 black, -2px -2px 0 black;
    padding: 0;
    margin: 0;
}

取得するため

http://jsfiddle.net/abalter/e3QUp

しかし、「Y」で奇妙な動作が発生します。

その問題を解決する方法について何か提案はありますか?

4

1 に答える 1

2

トリックは、4 つの斜め方向に向かう 4 つの影を設定することによって機能します。

これは、まっすぐなエッジと直角のコーナーでは問題なく機能しますが、角度が悪いY の上部ブレースでは機能しません。

これを修正するために私が考えることができる唯一の方法は、結果に満足するまで、必要なだけ多くの角度を指して、影の数を増やすことです.

あなたが持っている影は約 3 ピクセルの長さ (2+2 + 2*2 の平方根) であるため、スタイル 3*cos(a) 3*sin(a) で他の値を使用できます。

于 2013-09-17T21:04:33.917 に答える