box-shadowプロパティを使い、ボックス要素に影をつけどのように見えるのか確認します。

box-shadowプロパティ

box-shadowプロパティは影の相対的な位置、影のぼかし、影の長さ、影の色が指定出来ます。

box-shadow: xの位置 yの位置 ぼかし具合 影の長さ 影の色;

確認

前提

以下のHTMLを使用します。

HTML

<!-- ベース -->
<div class="box"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  margin: 30px;
}

結果

影の位置

xの位置 yの位置は共にpxで指定します。
xの位置 yの位置の指定は必須になります。なので、xの位置だけ指定したい場合でも、yの位置には0を指定する必要があります。
なお、ぼかし具合、影の長さを指定せずに、影の色を指定する事も可能です。

HTML

<!-- 影の方向 -->
<div class="box shadow-right-01"></div>
<div class="box shadow-left-01"></div>
<div class="box shadow-top-01"></div>
<div class="box shadow-bottom-01"></div>
<div class="box shadow-right-bottom-01"></div>
<div class="box shadow-left-top-01"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  margin: 30px;
}

/* 影の方向 */
.shadow-right-01 {
  box-shadow: 4px 0;
}

.shadow-left-01 {
  box-shadow: -4px 0;
}

.shadow-top-01 {
  box-shadow: 0 -4px;
}

.shadow-bottom-01 {
  box-shadow: 0 4px;
}

.shadow-right-bottom-01 {
  box-shadow: 4px 4px;
}

.shadow-left-top-01 {
  box-shadow: -4px -4px;
}

結果

ぼかし具合

xの位置、yの位置を0に指定すると、要素の中央(上下左右)からぼけるように見えます。

HTML

<!-- 影のぼかし -->
<div class="box shadow-blur-basic-01"></div>
<div class="box shadow-blur-strong-01"></div>
<div class="box shadow-center-blur-strong-01"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  margin: 30px;
}

/* ぼかし */
.shadow-blur-basic-01 {
  box-shadow: 4px 4px 4px;
}

.shadow-blur-strong-01 {
  box-shadow: 4px 4px 10px;
}

.shadow-center-blur-strong-01 {
  box-shadow: 0 0 10px;
}

結果

影の長さ

ぼかし具合が指定されている必要があります。ぼかしの長さ(広がり)を指定します。

HTML

<!-- 広がりの範囲 -->
<div class="box shadow-blur-spread-basic-01"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  margin: 30px;
}

/* 広がり */
.shadow-blur-spread-basic-01 {
  box-shadow: 4px 4px 4px 4px;
}

結果

影の色

影の色を指定します。

HTML

<!-- 影の色 -->
<div class="box shadow-color-basic-01"></div>
<div class="box shadow-color-blur-01"></div>
<div class="box shadow-color-blur-spread-01"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  margin: 30px;
}

/* 影の色 */
.shadow-color-basic-01 {
  box-shadow: 4px 4px #FF66FF;
}

.shadow-color-blur-01 {
  box-shadow: 4px 4px 10px #FF66FF;
}

.shadow-color-blur-spread-01 {
  box-shadow: 4px 4px 10px 4px #FF66FF;
}

結果

最後に

特にありません。