box-shadow
box-shadowは、要素に影を付けるスタイルです。
解説
要素に影を付けたいときに使用します。
１つめの値と２つめの値で、影を表示する位置を要素からの相対位置で指定します。
３つめの値で影をどれだけぼかすかを指定します。この値は省略可です。
４つめの値で影をどれだけ広げるかを指定します。この値は省略可です。
５つめの値で影の色を指定します。
影を内側に表示させたい場合は、６つめの値にinsetを指定します。
構文
構文は以下になります。
box-shadow: none;
box-shadow: 値(X) 値(Y)
box-shadow: 値(X) 値(Y) 値(ぼかし※) 値(広がり※) 値(色※) inset※
※は省略可です。
値
box-shadowには以下の値が指定できます。
| 値 | 説明 |
|---|---|
| 値(X) | 影の位置（X方向）を数値と単位で指定 （例）2px、1emなど |
| 値(Y) | 影の位置（Y方向）を数値と単位で指定 （例）2px、1emなど |
| 値(ぼかし) | ぼかしのサイズを数値と単位で指定 （例）2px、1emなど ※マイナス値の指定は不可 |
| 値(広がり) | 広がりのサイズを数値と単位で指定 （例）2px、1emなど |
| 値(色) | 影の色を指定 （例）blue、#0000ff など |
| inset | 影を内側に表示させたい場合に指定する |
| none | 明示的に影を表示しない指定（初期値） （例）box-shadow:none; |
太字の値は初期値です。
サンプル
横10px、縦10px、ぼかしなし、広がりなし、青色の影を付ける
.sample01 {
border:1px solid #808080;
height:50px;width:200px;
box-shadow:10px 10px blue;
}
<div class="sample01">あいうえおかきくけこ</div>
あいうえおかきくけこ
横10px、縦10px、ぼかし10px、広がりなし、青色の影を付ける
.sample02 {
border:1px solid #808080;
height:50px;width:200px;
box-shadow:10px 10px 10px blue;
}
<div class="sample01">あいうえおかきくけこ</div>
あいうえおかきくけこ
横10px、縦10px、ぼかし10px、広がり10px、青色の影を付ける
.sample03 {
border:1px solid #808080;
height:50px;width:200px;
box-shadow:10px 10px 10px 10px blue;
}
<div class="sample01">あいうえおかきくけこ</div>
あいうえおかきくけこ
横10px、縦10px、ぼかしなし、広がりなし、青色で内側の影を付ける
.sample04 {
border:1px solid #808080;
height:50px;width:200px;
box-shadow:10px 10px blue inset;
}
<div class="sample01">あいうえおかきくけこ</div>
あいうえおかきくけこ
備考
- 影ではなく要素の背景色や枠線の色を指定したい場合は、
background-color や border-colorを使用します。
関連項目
- text-shadow：文字に影を指定する
- background-color：背景色を指定する
- border-color：枠線の色を指定する
