CSS3で文字の影を設定するにはどうすればよいですか? CSS3でtext-shadowを使ってテキストシャドウを設定する方法

css3 には非常に便利で簡潔なプロパティがたくさんあります。そこで、今日の記事では、テキストに影を追加することができる、css3 の text-shadow プロパティを紹介します。 -shadow 属性は、関連する属性値を設定します。 css3のtext-shadowを使ってテキストシャドウを設定する具体的な内容を見てみましょう。

まず、text-shadow プロパティを詳しく見てみましょう。

text-shadow 属性: CSS3 では、text-shadow 属性を使用してページ上のテキストに影効果を追加できます。関連する属性値を設定することで、希望する効果を実現できます。 text-shadow 属性に設定すると、画像の使用が減ります。

text-shadow 属性の使用方法: text-shadow: X 軸 Y 軸 Rpx color;

プロパティの説明 (対応する順序): Shadow Value) の Y 軸影 (負の値を使用できます) 影のぼかし値 (半径サイズ) 影の色。

次に、css3 設定テキスト シャドウ の小さな例を見てみましょう:

<h1>PHP中文网文字阴影</h1>

h1{
    text-shadow: 2px 3px 1px pink;
     color:blue;
}

css3 設定テキスト シャドウ効果は次のとおりです:

説明:

1) 変位距離: text-shadow で使用されるパラメーターのうち、最初の 2 つのパラメーターは、影の水平方向と垂直方向の変位です。

2) シャドウのブラー半径: text-shadow 属性の 3 番目のパラメーターは、シャドウのブラー範囲を表します。

3) 影の色: text-shadow 属性の 4 番目のパラメーターは、影を描画するときに使用される色で、3 つのパラメーターの前または後に配置できます。色の値が指定されていない場合は、テキストの色の値が使用されます。

以上がCSS3で文字の影を設定するにはどうすればよいですか? CSS3でtext-shadowを使ってテキストシャドウを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。