CSS

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

by THEVOS posted Nov 28, 2019
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

ESC閉じる

Larger Font Smaller Font 上へ 下へ Go comment 印刷
Extra Form
原文出所 https://webisfree.com/2017-09-01/css-%ED...%B0-stroke

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

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

-webkit-text-stroke: 1px #000


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

 

.text-stroke {
  -webkit-text-stroke: 1px #000;
}

 

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

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

 

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

.text-stroke {
    color: #f00;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}


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

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

<span class="text-stroke">THEVOS</span>


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

THEVOS

Facebook [ja]コメント