CSSの影効果はよく使うCSSのプロパティですが、しっかりと理解したことがありますか？使用するときは、Blue Lake から直接コピーする必要がありますか?その各パラメーターを理解していますか?影を使用するとどのような美しい効果が得られるでしょうか?
シャドウ効果は Web デザインでよく使用されます。CSS3 が登場する前は、テキストや要素にシャドウ効果を追加する必要があり、非常に不便でした。 CSS3 の登場後は、text-shadow と box-shadow の 2 つのプロパティを使用して、画像を使用せずにテキストや要素に影効果を追加できるようになりました。
1. テキストシャドウ
CSS の text-shadow プロパティを使用して、テキストの影効果を設定できます。プロパティの構文は次のとおりです。
テキストシャドウ:オフセットxオフセット-yblurcolor;
構文は次のように説明されます。
(1) offset-x: 必須パラメータ。影の水平オフセットを設定します。負の値にすることもできます。
(2) offset-y: 必須パラメータ。影の垂直オフセットを設定します。負の値にすることもできます。
(3) ブラー: オプションのパラメーターで、ブラーの半径を設定します。値が大きいほどブラーが大きくなり、負の値は許可されません。
(4) color: オプションのパラメータ。値が省略または指定されていない場合は、color 属性の値が使用されます。
ヒント: text-shadow 属性を使用すると、影効果の複数のグループを同時に設定できます。定義された影効果のグループは、最初の影を先頭にして定義順にリストされます。すぐ。さらに、テキストの影効果をキャンセルしたい場合は、text-shadow 属性の値を none に設定します。
[例] text-shadow 属性を使用してテキストに影効果を追加します。
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Practicalcontent=ie=edge><title>text-shadow</title></head><style>div :first-child{text-shadow:5px8px3pxred;}</style><body><div>テキストシャドウ</div></body></html>実行結果:
分析: text-shadow: 5px 8px 3px 赤;
2.ボックスシャドウ
CSS の box-shadow プロパティを使用して、HTML 要素の影効果を設定できます。プロパティの構文は次のとおりです。
box-shadow:h-shadowv-shadowblurspreadcolorinset;
構文は次のように説明されます。
(1) h-shadow: 必須パラメータ。影の水平方向のオフセットを設定します。負の値にすることができます。
(2) v-shadow: 必須パラメータ。影の垂直方向のオフセットを設定します。負の値にすることもできます。
(3) ブラー: オプションのパラメーターで、ブラーの半径を設定します。値が大きいほどブラーが大きくなり、負の値は許可されません。
(4) Spread: オプションのパラメータで、影のサイズを設定します。
(5) color: オプションのパラメータ。影の色を設定します。
(6) inset: オプションのパラメータ。デフォルトの外側のシャドウ (アウトセット) を内側のシャドウに変更します。
ヒント: text-shadow 属性と同様に、box-shadow 属性でも、複数のシャドウ効果のグループを同時に設定できます。カンマを使用して、定義されたシャドウ効果の複数のグループが定義順にリストされます。最後に最初の影を追加します。
[例] box-shadow 属性を使用してテキストに影効果を追加します。
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatibilitycontent=ie=edge><title>box-shadow</title></head><style>div :first-child{幅:200px;高さ:200px;border:1pxsolidblack;box-shadow:5px8px3px2pxred;}</style><body><div></div></body></html>実行結果:
分析: box-shadow: 5px 8px 3px 2px 赤;