概要へ移動

簡単な例。

CSS : 例
.sample1  {

    box-shadow:     3px 3px 8px red;

}



.sample2  {   

    box-shadow:       3px  3px 8px red,

                     -3px -3px 8px red;

}
実行結果
sample1
sample2

このページで解説するコードの実行結果。（タイトルの文字列をクリックすると、コードに移動）

右に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
左に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
下に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
上に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
影の広がり
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
内側
+5 +5
0 +5
-5 +5
+5 0
0 0
-5 0
+5 -5
0 -5
-5 -5
影の色
sample1
sample2
複数指定
sample1
sample2
デフォルト HTML & CSS

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS
div {

    margin:             2em;    /*  外側の余白 */

    width:              5em;    /*  幅 */      

    height:             4em;    /*  高さ */ 

    background-color:   #ccc;   /*  背景色 */

}
HTML : 適用するHTML
<div class="sample1">sample1</div>

<div class="sample2">sample2</div>
実行結果
sample1
sample2

box-shadowの概要

box-shadowはボックスに影をつける。文字列に影をつけるのはtext-shadowである。

CSSプロパティ影をつける対象
box-shadowボックス
text-shadow文字列

基本的にbox-shadowには４つの引き数が必要である。第一～第三引き数は数値であり、第四引き数はカラーコードである。

引き数の順番設定値
１ ～ ３数値（＋ 単位）
４カラーコード

各引き数の設定する内容は以下。

引き数の順番設定する内容設定値マイナスの設定
第一引き数水平方向（左右）の位置数値（＋ 単位）可
第二引き数垂直方向（上下）の位置数値（＋ 単位）可
第三引き数影の広がり数値（＋ 単位）不可
第四引き数影の色カラーコード-

ボックスの内側に影をつける場合、insetの引き数を追加する。

順番を変えることができる

順番を代えて、第一引き数をカラーコードにして、第二～第四引き数を数値にすることもできる。

引き数の順番設定値
１カラーコード
２ ～ ４数値（＋ 単位）
引き数の順番設定する内容設定値マイナスの設定
第一引き数影の色カラーコード-
第二引き数水平方向（左右）の位置数値（＋ 単位）可
第三引き数垂直方向（上下）の位置数値（＋ 単位）可
第四引き数影の広がり数値（＋ 単位）不可

順番を変えた実験。

CSS : 設定の順番を変更
.sample1 {    box-shadow:    1px  2px 3px red;  }

.sample2 {    box-shadow:    red 1px  2px 3px ;  }
順番を変更した結果
sample1
sample2

ただし順番を代えると説明がややこしいので、以下では「第一～第三引き数は数値、第四引き数はカラーコード」で説明する。

(1) 横方向の位置

第一引き数だけを変更してみる。 大きくなるにつれ、影が右にずれていく。

CSS : 第一引き数
.px0     { box-shadow:    0    0 5px red ; }

.px1     { box-shadow:    1px  0 5px red ; }

.px2     { box-shadow:    2px  0 5px red ; }

.px3     { box-shadow:    3px  0 5px red ; }

.px4     { box-shadow:    4px  0 5px red ; }

.px5     { box-shadow:    5px  0 5px red ; }

.px6     { box-shadow:    6px  0 5px red ; }

.px7     { box-shadow:    7px  0 5px red ; }

.px8     { box-shadow:    8px  0 5px red ; }

.px9     { box-shadow:    9px  0 5px red ; }

.px10   { box-shadow:    10px 0 5px red ; }
HTML : 適用するHTML
<div class="px0"    >0px</div>

<div class="px1"    >1px</div>

<div class="px2"    >2px</div>

<div class="px3"    >3px</div>

<div class="px4"    >4px</div>

<div class="px5"    >5px</div>

<div class="px6"    >6px</div>

<div class="px7"    >7px</div>

<div class="px8"    >8px</div>

<div class="px9"    >9px</div>

<div class="px10"   >10px</div>
右に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
マイナス値

マイナス値も指定可能。マイナスにすると、左にずれていく。

CSS : マイナス値の指定
.px0     { box-shadow:     0    0 5px red ; }

.px1     { box-shadow:    -1px  0 5px red ; }

.px2     { box-shadow:    -2px  0 5px red ; }

.px3     { box-shadow:    -3px  0 5px red ; }

.px4     { box-shadow:    -4px  0 5px red ; }

.px5     { box-shadow:    -5px  0 5px red ; }

.px6     { box-shadow:    -6px  0 5px red ; }

.px7     { box-shadow:    -7px  0 5px red ; }

.px8     { box-shadow:    -8px  0 5px red ; }

.px9     { box-shadow:    -9px  0 5px red ; }

.px10   { box-shadow:    -10px 0 5px red ; }
左に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px

(2) 縦方向の位置

第二引き数だけを変更してみる。 大きくなるにつれ、影が下にずれていく。

CSS : 第二引き数
.px0     { box-shadow: 0 0    5px red ; }

.px1     { box-shadow: 0 1px  5px red ; }

.px2     { box-shadow: 0 2px  5px red ; }

.px3     { box-shadow: 0 3px  5px red ; }

.px4     { box-shadow: 0 4px  5px red ; }

.px5     { box-shadow: 0 5px  5px red ; }

.px6     { box-shadow: 0 6px  5px red ; }

.px7     { box-shadow: 0 7px  5px red ; }

.px8     { box-shadow: 0 8px  5px red ; }

.px9     { box-shadow: 0 9px  5px red ; }

.px10   { box-shadow: 0 10px 5px red ; }
下に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
マイナス値

マイナス値も指定可能。マイナスにすると、上にずれていく。

CSS : マイナス値の指定
.px0     { box-shadow: 0  0    5px red ; }

.px1     { box-shadow: 0 -1px  5px red ; }

.px2     { box-shadow: 0 -2px  5px red ; }

.px3     { box-shadow: 0 -3px  5px red ; }

.px4     { box-shadow: 0 -4px  5px red ; }

.px5     { box-shadow: 0 -5px  5px red ; }

.px6     { box-shadow: 0 -6px  5px red ; }

.px7     { box-shadow: 0 -7px  5px red ; }

.px8     { box-shadow: 0 -8px  5px red ; }

.px9     { box-shadow: 0 -9px  5px red ; }

.px10    { box-shadow: 0 -10px 5px red ; }
上に
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px

(3) 影の広がり

第三引き数だけを変更してみる。 大きくなるにつれ、影がにじんでいく。

CSS : 第三引き数
.px0     { box-shadow: 0 0 0    red ; }

.px1     { box-shadow: 0 0 1px  red ; }

.px2     { box-shadow: 0 0 2px  red ; }

.px3     { box-shadow: 0 0 3px  red ; }

.px4     { box-shadow: 0 0 4px  red ; }

.px5     { box-shadow: 0 0 5px  red ; }

.px6     { box-shadow: 0 0 6px  red ; }

.px7     { box-shadow: 0 0 7px  red ; }

.px8     { box-shadow: 0 0 8px  red ; }

.px9     { box-shadow: 0 0 9px  red ; }

.px10   { box-shadow: 0 0 10px red ; }
実行結果
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px

これにマイナス値を設定することはできない。

(4) 影の色

カラーコード で指定する。

CSS : 色
.sample1  {

    box-shadow: 0 0 5px #00f;

}



.sample2  {

    box-shadow: 0 0 5px #0000ff;

}
実行結果
sample1
sample2

(5) inset : 内側の影

insetを指定すると、影は内側になる。

なお、引き数の順番は任意（＝どこでもいい）。

CSS : 色
.sample1  {

    box-shadow:       5px 5px 5px red;

}



.sample2  {

    box-shadow: inset 5px 5px 5px red;

}
実行結果
sample1
sample2

insetにすると、影が表示される位置がややこしいので、下の実行結果を参照。

CSS : inset
.sample-p-p   {    box-shadow: inset  5px  5px 5px red; }

.sample-0-p   {    box-shadow: inset  0    5px 5px red; }

.sample-m-p   {    box-shadow: inset -5px  5px 5px red; }



.sample-p-0   {    box-shadow: inset  5px  0   5px red; }

.sample-0-0   {    box-shadow: inset  0    0   5px red; }

.sample-m-0   {    box-shadow: inset -5px  0   5px red; }



.sample-p-m   {    box-shadow: inset  5px -5px 5px red; }

.sample-0-m   {    box-shadow: inset  0   -5px 5px red; }

.sample-m-m   {    box-shadow: inset -5px -5px 5px red; }
HTML : 適用するHTML
<div class="sample-p-p"    >+5 +5</div>

<div class="sample-0-p"    >0  +5</div>

<div class="sample-m-p"    >-5 +5</div>



<div class="sample-p-0"    >+5 0</div>

<div class="sample-0-0"    >0  0</div>

<div class="sample-m-0"    >-5 0</div>



<div class="sample-p-m"    >+5 -5</div>

<div class="sample-0-m"    >0  -5</div>

<div class="sample-m-m"    >-5 -5</div>
実行結果
+5 +5
0 +5
-5 +5
+5 0
0 0
-5 0
+5 -5
0 -5
-5 -5

複数の影の指定

複数の影を指定する場合、カンマ（,）でつなげる。

CSS : 第四引き数
.sample1 {

    box-shadow:      3px  3px 5px red,

                    -3px -3px 5px green;

}



.sample2 {

    box-shadow:        3px  3px 5px red,

                inset  3px  3px 5px green;

}
実行結果
sample1
sample2

Emmet : bsh

記述Visual Studio Code
bshbox-shadow: inset hoff voff blur #000;