【CSS】文字を超簡単に縁取りする方法!!

こんにちは!ラクです。

ラク

この記事では、CSSで簡単に文字の縁取りをする方法を紹介します!

縁取りするだけで、文字の印象がガラッと変わるので、是非使って見て下さい。

文字を縁取りする方法

では、早速文字を縁取りしていきましょう!

縁取りは、「text-stroke」を使います。

コードの書き方はこんな感じです。

p {
  -webkit-text-stroke: 2px #FF2B8E;
  text-stroke: 2px #FF2B8E;
}

こうすると

このように、簡単に縁取りできました。

MEMO1
text-strokeの前に「-webkit-」と付いていますが、これはベンダープリフィックスと言って新しいプロパティをブラウザで使うための識別子です。
MEMO2
pxや色の値はお好みで変えて下さい。
注意
pxの値を大きくし過ぎると、文字が潰れてしまうので注意して下さい

以上が、「文字を縁取りする方法」でした!

是非、活用してデザインの幅を広げて見て下さい!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です