Webデザイナーブログから学ぶホームページ制作

「box-shadow」プロパティは、要素（ボックス）に影（シャドウ）を付けるためのCSSプロパティです。
ボックスの水平方向のずれ（X軸）、垂直方向のずれ（Y軸）、ぼかしの大きさ、影の広がり（spread）、影の色を指定することで、立体感や奥行きのあるデザインを表現することができます。

また、影を内側に表示する「inset」を指定することも可能です。

要素に影（シャドウ）を付けるための値は、「影の水平方向のずれ」「影の垂直方向のずれ」「影のぼかしの大きさ」「影の広がり（spread）」「影の色」などを指定することができます。
影の水平方向・垂直方向のずれを指定する値には「px」「em」「rem」などの単位を指定することができ、影のぼかしの大きさ・影の広がりの大きさを指定する値にも同様に「px」「em」などの単位を使用できます。
影の色を指定する値には、「カラー名」「16進数カラーコード」「RGB」「RGBA」「HSL」「HSLA」などの色指定方法を使用することができます。

また、「box-shadow」プロパティでは、カンマ（ , ）で区切ることで複数の影を同時に指定することも可能です。

【指定できる値の種類】
・影の水平方向のずれ（X軸）：影を要素から水平方向にどの程度ずらすかを指定
・影の垂直方向のずれ（Y軸）：影を要素から垂直方向にどの程度ずらすかを指定
・影のぼかしの大きさ：影の広がり具合・ぼかしの強さを指定
・影の広がり（spread）：影のサイズを拡大または縮小して表示
・影の色：影のカラーを指定
・inset（任意）：影を内側に表示

要素に影を付けたい場合は、「box-shadow」プロパティを使い、水平方向のずれ・垂直方向のずれ・ぼかしの大きさ・影の広がり・影の色を順に指定します。

セレクタ {
box-shadow: 水平方向のずれ 垂直方向のずれ ぼかしの大きさ 影の広がり 影の色;
}

/* 基本値 */
/* 影を右下に黒で表示 */
box-shadow: 2px 2px 2px black;

/* 少し大きめの影をつける */
box-shadow: 4px 4px 5px #888888;

/* 赤い影をつける */
box-shadow: 3px 3px 3px red;

/* 色指定 */
/* カラー名 */
box-shadow: 2px 2px 4px blue;
box-shadow: 2px 2px 4px orange;
box-shadow: 2px 2px 4px black;

/* 16進数カラーコード */
box-shadow: 2px 2px 4px #FF0000; /* 赤 */
box-shadow: 2px 2px 4px #00FF00; /* 緑 */
box-shadow: 2px 2px 4px #0000FF; /* 青 */

/* RGB値 */
box-shadow: 2px 2px 4px rgb(255, 0, 0);
box-shadow: 2px 2px 4px rgb(0, 255, 0);
box-shadow: 2px 2px 4px rgb(0, 0, 255);

/* HSL値 */
box-shadow: 2px 2px 4px hsl(0, 100%, 50%);   /* 赤 */
box-shadow: 2px 2px 4px hsl(120, 100%, 50%); /* 緑 */
box-shadow: 2px 2px 4px hsl(240, 100%, 50%); /* 青 */

/* 複数 */
/* 複数の影を重ねる */
box-shadow:1px 1px 0 #fff, 2px 2px 3px #999;