Css 텍스트 외곽선 처리하기, Stroke

CSSを使用してテキストに輪郭、ストローク効果を与える方法を見てみます。

輪郭はテキストを強調する効果的な方法です。CSSを使用して簡単に使用することができますが、最も簡単な方法は次のように-webkit-text-strokeを使用する方法です。

-webkit-text-stroke: 1px #000


ただし、この方法は非常に便利ですが、標準的な方法ではなく、ウェブキットおよびモジラ系のブラウザでのみ適用されます。使用する場合は、次のようにCSSに適用してください。

これでテキストに輪郭が鮮明に表示されます。

それでは、別の方法を見てみましょう。

# -webkit-text-stroke クロスブラウジング方法
以下のような方法を使用すると、テキストの影響を利用して、同様の効果を得ることができます。以下のコードをご覧ください。  

この方法は、text-shadowが適用されるほとんどのブラウザで実装されます。非常に効果的な方法です。
 

# 実際の輪郭が適用された例を見る
もしも、以下のようなHTMLに上記のCSSを適用して輪郭を直接実装してみましょう。

上記のコードの実行結果は以下のようになります。

THEVOS