css - CSS での「テキスト枠」の装飾

Question

重複の可能性:
CSS Font Border?

Photoshop を使用しているときは、テキストを入力して「テキスト」に白い枠線を適用し、そのテキストに影を適用するのは簡単です。
ここに画像の説明を入力

しかし、HTML を使用しているときは、テキストを記述するため<div>に、<p>または<span>このようなタグが必要です。次に、このようにテキストを装飾するために、タグのテキスト (またはコンテンツ) ではなく、特にタグに装飾を適用します。仮定する：

<span id="decor">Text</span>

次に、次のような CSS を行います。

#decor{color: #9E0B0E; border: 5px solid #FFF; box-shadow: 3px 0 2px #CCC;}

ただし、スパンタグのコンテンツではなく、スパンをスタイルすることです（ここでは「テキスト」）。

だから、私の質問は：

いくつかのコメントと返信の後、考慮してください。text-shadowプロパティは、白い境界線または灰色の影のいずれかの 1 つのジョブしか実行していませんが、両方が必要です。

score 1 · Accepted Answer

使用できます

<p class="decor">Text</p>

その後

p.decor{
color: #9E0B0E; 
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; 
}

score 0 · Accepted Answer

残念ながら、これを実行して複数のブラウザーをサポートする簡単な方法はありません。Webkit は css タグ -webkit-text-stroke をサポートしていますが、Firefox と IE は除外されています (特に)

例：

p {
-webkit-text-stroke: 1px black
}

2 に答える 2