CSS3でテキストの影効果を追加するにはどうすればよいですか? text-shadow はテキストのシャドウ効果を設定します

影効果は一般的で非常に実用的な効果です。影効果を使用して Web ページを美しくするときに、フォントやテキストの影を設定する方法など、いくつかの質問があると思います。 。そこでこの章では、CSS3でフォントテキストの影を設定する方法を説明します。困っている友人は参考にしていただければ幸いです。

実際、css3 には、フォント テキストに影の効果を追加できる非常に実用的な属性があります。それが css3 text-shadow 属性 です。

それでは、まず text-shadow 属性について詳しく見てみましょう:

Text-shadow は CSS スタイル属性の単語で、テキストのテキスト フォントを設定するために使用されます。オブジェクトには影とぼかしの効果があります。

text-shadow 属性: CSS3 では、text-shadow 属性を使用して、関連する属性値を設定することで、ページ上のテキストにシャドウ効果を追加できます。 text-shadow 属性に、画像の使用を減らします。

text-shadow 属性の構文:

text-shadow: h-shadow v-shadow blur color;

text-shadow 属性では 4 つのパラメーターをスペースで区切って設定できることがわかります。 ：

h-shadow: 水平方向の影の位置 (x 軸方向) を設定します。必須のパラメーターです。負の値も許可されます。
v-shadow: 垂直影の位置 (y 軸方向)、必須パラメーター、許容される負の値を設定します。
blur: 影のぼかしの距離 (半径サイズ) を選択してパラメータを設定できます。
color: 影の色。設定するオプションのパラメータ。

注: text-shadow プロパティは、テキストに 1 つ以上の影を追加できます。このプロパティは、シェードのカンマ区切りのリストで、各シェードは 2 つまたは 3 つの長さの値とオプションの色の値で指定されます。省略された長さは 0 です。

text-shadow 属性の使用法を具体的に理解するために、css3 でフォント テキスト シャドウを設定する小さな例を見てみましょう:

<h1 id="我是一段测试文字">我是一段测试文字</h1>

h1{
   color:powderblue; /*设置文字颜色*/
   text-shadow: 2px 3px 1px pink;/*添加字体文字的阴影*/
}

レンダリング:

CSS3 テキストのシャドウ効果が設定されていない場合に何が起こるかを見てみましょう:

## 説明:

1. シャドウの水平オフセット (h-shadow): 値は正または負の値をとることができます。値が正の場合、シャドウはオンになります。値が負の場合、影はオブジェクトの左側にあります。

2. 影の垂直オフセット (v-shadow): 正の値または負の値を指定できます。それ以外の場合、影はオブジェクトの下部にあります。値が負の値の場合、影はオブジェクトの上に表示されます。

3. シャドウのブラー半径: 正の値にのみ設定できます。値が大きいと影がぼやけ、値が大きいと影がはっきりします。値が 0 の場合、影にはブラー効果がないことを意味します。

4. 影の色: 色の値が指定されていない場合、ブラウザはデフォルトの色を使用しますが、各ブラウザのデフォルトの色は異なり、特に Webkit カーネル下の Safari および Chrome ブラウザでは色が使用されません。透明度を表すため、このパラメータを省略しないことをお勧めします。

ブラウザのさまざまなデフォルト色について、text-shadow 属性がさまざまなブラウザでサポートされているかどうかを見てみましょう:

ブラウザのサポート:

すべての主要なブラウザは text-shadow 属性をサポートしています。

注: Internet Explorer 9 以前のブラウザは text-shadow 属性をサポートしていません。

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