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

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

さまざまな 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 番目のペアは左のシャドウ用、最後のペアは上のシャドウ用です。

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

リーリー

タグ内にテキストを追加し、テキストにストロークを適用します

ここではテキストを SVG 画像に変換します。その後、ストロークの色、塗りつぶしの色、ストロークの幅などを設定し、CSS のさまざまなプロパティを使用してテキストにアウトライン効果を追加します。

＃＃＃文法＃＃＃

リーリー

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

例 4

の中国語訳は次のとおりです:

例 4

以下の例では、

リーリー

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

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

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