概要

CSSプロパティ｢box-shadow｣は、ボックスにドロップシャドウ（影）の効果をつけることができます。

<div class="shadow">このボックスに影がつきます</div>
<style>
div {
  width: 300px;
  height: 50px;
  border: 1px solid #000;
}
.shadow {
  box-shadow : 5px 5px;
}
</style>

値の指定方法

影は二つから四つの値で定義することができます。それぞれの意味合いを説明します。

box-shadow {値1 値2 値3 値4}

値1・・・必須指定項目。水平方向の影の向きを指定します。プラス値で右に、マイナス値で左に移動します。

値2・・・必須指定項目。垂直方向の影の向きを指定します。プラス値は下に、マイナス値は上に移動します。

値3・・・任意指定項目。影にぼかしを指定します。

値4・・・任意指定項目。影の広がりを指定します。

実際に値を入れて確認してみましょう。水平方向右に5px、垂直方向に5px、影のぼかしを5px、影の広がりを3px指定した例です。

<div class="shadow">このボックスに影がつきます</div>
<style>
div {
  width: 300px;
  height: 50px;
  border: 1px solid #000;
}
.shadow {
  box-shadow : 5px 5px 5px 1px;
}
</style>

さらに影の色を指定することもできます。

<div class="shadow">このボックスに影がつきます</div>
<style>
div {
  width: 300px;
  height: 50px;
  border: 1px solid #000;
}
.shadow {
  box-shadow : 5px 5px 5px 1px #dee
}
</style>

要素の内側に影をつけられる値 inset

値にinsetを指定すると要素の内側に影をつけることができます。基準は要素の左上になります。ただし、この値をつける場合は値4の影の広がりを指定することが必須となります。つまり4つの値が必須となります。

<div class="shadow">このボックスに影がつきます</div>
<style>
div {
  width: 300px;
  height: 50px;
  border: 1px solid #000;
}
.shadow {
  box-shadow : 5px 5px 5px 1px inset;
}
</style>

使用例

画像に影をつけて、浮いているようなデザインを表示してみます。

<p>影のサンプル1</p>
<img src="https://www-creators.com/wp-content/uploads/2017/11/food_sample.jpg" width="100" height="auto" alt="" class="shadow">
<p>影のサンプル2</p>
<img src="https://www-creators.com/wp-content/uploads/2017/11/food_sample.jpg" width="100" height="auto" alt="" class="shadow2">

<style>
img {
  display: block;
}
.shadow {
  box-shadow : 1px 5px 5px 1px rgba(0, 0, 0, 0.4);
}
.shadow2 {
  box-shadow : -1px -5px 5px 1px rgba(0, 0, 0, 0.4);
}
</style>

仕様書

• CSS Backgrounds and Borders Module Level 3

関連CSSプロパティ

• box-shadow