【CSS】文字を中抜きしてオシャレに装飾する方法！！

2020年9月8日 45秒

こんにちは！ラクです。

この記事では、文字を中抜きしてオシャレにする方法を紹介します！

ラク

中抜きって良いよね！（語彙力）

文字を中抜きする方法

中抜きを実装するまでの手順はこんな感じ。

STEP1

文字の色を透明にする

「color: transparent;」を使う。

STEP2

文字を縁取りする

「text-stroke」を使う。

STEP3

完成！！

文字の色を透明にする場合は、以下のコードを使用します。

color: transparent;

次に、文字を縁取りするには以下のコードを使います。

text-stroke: 2px black;
-webkit-text-stroke: 2px black;

MEMO

このプロパティは、ブラウザの拡張機能なので「-webkit-」をつけています。

これで、文字を中抜きできました！

ラク

縁の色や太さは、自分好みにアレンジして見て下さい！