ホームページ >ウェブフロントエンド >CSSチュートリアル >テキストのアウトライン効果とは何ですか?
テキストのアウトラインのみを表示し、テキストのパディングを削除する必要がある場合があります。輪郭効果とも言えます。
さまざまな CSS プロパティを使用して、テキストのアウトライン効果を生成できます。たとえば、テキストに枠線を追加したり、テキストの塗りつぶし色を削除したり、テキストにアウトライン効果を追加したりできます。
ここでは、HTML と CSS の 3 つの異なる方法を使用して、アウトライン効果のあるテキストを表示します。
この方法では、3 つの CSS プロパティを使用してテキストにアウトライン効果を追加します。 1 つ目は「-webkit-text-fill-color」で、テキストの塗りつぶしの色を背景色と同じに変更します。 2 番目は「-webkit-text-lines-width」で、テキストにストロークの幅を追加します。3 番目の CSS プロパティは「-webkit-text-lines-color」で、テキストにアウトラインの色を追加します。
###文法###上記の構文では、テキストの塗りつぶしの色とストロークの幅を設定し、ストロークは輪郭の色を表します。
例 1
の中国語訳は次のとおりです:出力では、ユーザーは青い枠線でテキストを確認できます。
リーリー例 2
は次のように翻訳されます:出力では、赤い背景に黄色の輪郭が付いたテキストが表示されます。
リーリー「Text-shadow」CSS プロパティを使用します
ユーザーは、「text-shadow」CSS プロパティを使用して、次の構文に従ってテキストにアウトライン効果を追加できます。
リーリー例 3
は翻訳せずに保存できます以下の例では、div 要素にテキストが含まれています。 CSSでは背景色と文字色を同じ色に設定しています。次に、「text-shadow」CSS プロパティを使用してアウトライン効果を追加しました。ここでは、「text-shadow」値に 4 対 4 の値を使用しています。最初のペアは右のシャドウ用、2 番目のペアは下のシャドウ用、3 番目のペアは左のシャドウ用、最後のペアは上のシャドウ用です。
ここではテキストを SVG 画像に変換します。その後、ストロークの色、塗りつぶしの色、ストロークの幅などを設定し、CSS のさまざまなプロパティを使用してテキストにアウトライン効果を追加します。
上記の構文では、テキストの塗りつぶしの色を設定します。さらに、テキストのストロークの色を設定します。 「paint-order: ストローク」CSS プロパティを使用すると、塗りつぶしの色が互いに交差するときに、ストロークを介して塗りつぶしの色を重ねることができます。
例 4
以下の例では、
リーリー以上がテキストのアウトライン効果とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。