CSS でボックスの影を底部だけに設定する

この記事では、CSS のボックスの下部にのみセットボックスシャドウを紹介します。

CSS で box-shadow プロパティを使用して下部ボックスの影を設定する

box-shadow プロパティを使用して、ボックスの下部にのみシャドウを設定できます。box-shadow プロパティは、選択した要素のシャドウを設定します。

プロパティにはいくつかのオプションがあります。まず、以下に示す構文からプロパティを理解しましょう。

box-shadow: [h-offset] [v-offset] [blur-radius] [spread-radius] [color];

box-shadow プロパティがそれを実装するためにどのように機能するかを理解することが不可欠です。h-offset オプションは、要素の水平方向にシャドウを設定します。

正の値は影を要素の右方向に設定し、負の値は影を要素の左方向に設定します。

同様に、v-offset オプションはシャドウを垂直に設定します。この場合も、正の値はシャドウを下部に設定し、負の値はシャドウを要素の上部に設定します。

blur-radius オプションは、シャドウのぼかし半径を示します。ぼかし半径が大きくなると、影がよりぼやけます。

spread-radius オプションは、シャドウのサイズを要素に設定します。正の値はシャドウのサイズを大きくし、負の値は小さくします。

color オプションを使用して、シャドウの色を設定することもできます。ただし、オプション blur-radius、spread-radius および color はオプションです。

box-shadow プロパティがどのように機能するかを学習したので、次にそれを実装してボックスに下部の影を作成します。

そのために、h-offset を 0 に設定し、v-offset に値を与えることができます。その結果、影はボックスの下部にのみ表示されます。

たとえば、特定の高さと幅のボックスを作成します。background-color プロパティを black に設定します。

次に、box-shadow プロパティを使用して、さまざまなオプションを設定します。h-offset には 0、v-offset には 8px、blur-radius には 2px、spread-radius には -2px、gray には color を設定します。

その結果、下部に灰色の影が付いたブラックボックスが表示されます。したがって、box-shadow プロパティを使用して、CSS でボックスの下部にシャドウを設定する方法を学びました。

<div class="box">
</div>

.box {
 height:200px;
 width:200px;
 background-color:black;
 box-shadow: 0 8px 2px -2px gray;
}