テキストのアウトライン効果とは何ですか?

テキストのアウトラインのみを表示し、テキストのパディングを削除する必要がある場合があります。輪郭効果とも言えます。

さまざまな CSS プロパティを使用して、テキストのアウトライン効果を生成できます。たとえば、テキストに枠線を追加したり、テキストの塗りつぶし色を削除したり、テキストにアウトライン効果を追加したりできます。

ここでは、HTML と CSS の 3 つの異なる方法を使用して、アウトライン効果のあるテキストを表示します。

さまざまな CSS プロパティを使用する

この方法では、3 つの CSS プロパティを使用してテキストにアウトライン効果を追加します。 1 つ目は「-webkit-text-fill-color」で、テキストの塗りつぶしの色を背景色と同じに変更します。 2 番目は「-webkit-text-lines-width」で、テキストにストロークの幅を追加します。3 番目の CSS プロパティは「-webkit-text-lines-color」で、テキストにアウトラインの色を追加します。

ユーザーは 3 つの異なる CSS プロパティを使用して、次の構文に従ってテキストにアウトライン効果を追加できます。

上記の構文では、テキストの塗りつぶしの色とストロークの幅を設定し、ストロークは輪郭の色を表します。

例 1

例 1

以下の例には、テキストを含むクラス名「text1」の div 要素があります。 CSSで文字のフォントサイズを設定しました。さらに、テキストにアウトライン効果を追加するために、塗りつぶしの色を白、ストロークの幅を「1px」、ストロークの色を「青」に設定して青いアウトラインを表示します。

出力では、ユーザーは青い枠線でテキストを確認できます。

例 2

例 2

以下の例では、div 要素に赤い背景を設定します。次に、塗りつぶしの色として「赤」を使用し、塗りつぶしの色を背景と同じにします。ここでは、ストロークの幅は「1.2px」、ストロークの色は「黄色」です。

出力では、赤い背景に黄色の輪郭が付いたテキストが表示されます。

「Text-shadow」CSS プロパティを使用します

このメソッドでは、「text-shadow」CSS プロパティを使用して、テキストのアウトライン効果を生成します。背景色と同じ文字色を設定して文字を非表示にし、文字の影のみを表示すると、アウトライン効果を生成できます。

ユーザーは、「text-shadow」CSS プロパティを使用して、次の構文に従ってテキストにアウトライン効果を追加できます。

「text-shadow」プロパティは、影を設定するために 4 つの異なる値を取ります。 1 つ目は x オフセット、2 つ目は y オフセット、3 つ目はぼかし値、4 つ目は影の色です。

例 3

以下の例では、div 要素にテキストが含まれています。 CSSでは背景色と文字色を同じ色に設定しています。次に、「text-shadow」CSS プロパティを使用してアウトライン効果を追加しました。ここでは、「text-shadow」値に 4 対 4 の値を使用しています。最初のペアは右のシャドウ用、2 番目のペアは下のシャドウ用、3 番目のペアは左のシャドウ用、最後のペアは上のシャドウ用です。

実際には、ストロークの代わりにテキストの影が表示され、輪郭効果が得られます。

＃＃＃文法＃＃＃

上記の構文では、テキストの塗りつぶしの色を設定します。さらに、テキストのストロークの色を設定します。 「paint-order: ストローク」CSS プロパティを使用すると、塗りつぶしの色が互いに交差するときに、ストロークを介して塗りつぶしの色を重ねることができます。

例 4

例 4

以下の例では、

テキストにアウトライン効果を追加する 3 つの方法を見てきました。最初の方法では、3 つの異なる CSS プロパティを使用して、テキストの塗りつぶしの色を変更し、テキストのストロークを設定します。

2 番目の方法では、テキストを表示する代わりに「テキスト シャドウ」を表示します。 3 番目の方法では、テキストを SVG に変換し、SVG 関連のさまざまな CSS プロパティを使用してテキストにアウトライン効果を追加します。

以上がテキストのアウトライン効果とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。