CSSでフォントや要素に影を追加するにはどうすればよいですか? text-shadow と box-shadow の実装

この記事では、CSS でフォ​​ントや要素に影を追加する方法を紹介します。 text-shadow と box-shadow の実装。困っている友人は参考にしていただければ幸いです。

1. 構文:

オブジェクト セレクター {text-shadow:X 軸オフセット Y 軸オフセット シャドウ ブラー半径 シャドウ カラー}

注: text-shadow は 1 つ以上の投影を使用できます。複数の投影を使用する場合は、カンマ「,」で区切る必要があります。
2. 値:

box-shadow 属性には最大 6 つのパラメータ設定を指定でき、それぞれの値は次のとおりです:

(1) Shadow水平オフセット量: 値は正または負の値で、値が正の場合、影はオブジェクトの右側にあります。それ以外の場合、影はオンになります。オブジェクトの左側;

(2) 影の垂直オフセット: 値が正の場合は、影の垂直オフセットを指します。それ以外の場合、その値は負になります。

(3) 影のぼかし半径: このパラメータはオプションです。ただし、その値は正の値のみです。値が大きいと影がぼやけ、値が大きいと影がはっきりします。値が 0 の場合、影にぼかし効果がないことを意味します。

(4) 影の色: このパラメータは色が設定されていない場合、ブラウザでデフォルトの色を使用します。デフォルトの色はブラウザごとに異なります。特に Webkit カーネル下の Safari および Chrome ブラウザは無色、つまり透明になります。

CSS3 が登場する前は、このパラメータを省略しないことをお勧めします。テキストの影は基本的に全体に絵があります。 CSS3 が登場するまで、テキストの影を作成する方法はさらに改良されました。実際、text-shadow は CSS2 で登場しましたが、CSS2.0 でも容赦なく放棄されたわけではなく、現在では CSS3 でも再び使用されています。これは、text-shadow が依然として注目に値することを示しています。したがって、資格のあるフロントエンド担当者として、テキストシャドウを習得することが最優先事項でなければなりません。

CSS3 テキストの影の効果を設定します。 text-shadow スタイルにはもともと CSS2 バージョンでこの属性がありましたが、CSS3 ではテキストの影 text-shadow が再度適用されて強化されます。テキストのレイアウトと美化効果。

3. CSS3 の単語と文法

CSS3 の単語: text-shadow

文法構造:

text-shadow: 5px 2px 6px black;

5px は次のことを表します。影はテキストの左から 5 ピクセルの位置に表示されます

2px の意味: 影はテキストの左から 2 ピクセルの位置に表示されます

6px の意味: 影のサイズの範囲

黒の意味:影の色は黒です

例:

<p class="orange" id="all"> 
    <h1 id="smile微笑">smile微笑</h1> 
</p>

　　　　 body {
				width: 100%;
				margin: 0px auto;
				padding: 0px;
				font-family: "微软雅黑";
			}
			
			.orange {				
				background-color: #f8f8f8;
				padding: 30px;				
			}
			
			.orange h1 {
				font: normal 32px 微软雅黑, sans-serif;
				padding: 20px 0 20px 40px;
				text-align: center;
				display: block;
				color: #FFF;
				background-color: lightskyblue;
				border-radius: 5px;
				text-shadow: 5px 2px 6px #000;//text-show是字的阴影
				box-shadow: 5px 2px 6px #000;//box-show是盒子的阴影
			}        　　

効果は次のようになります:

##要約: 上記がこの記事の全内容ですので、皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、

CSS ビデオ チュートリアル 、 CSS3 ビデオ チュートリアル をご覧ください。

関連する推奨事項:

php 公共福祉トレーニング ビデオ チュートリアル

CSS オンライン マニュアル

CSS3 オンライン マニュアル

div/css グラフィック チュートリアル

以上がCSSでフォントや要素に影を追加するにはどうすればよいですか? text-shadow と box-shadow の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。