box-shadowプロパティは「ボックス要素に影」を指定する場合に使用します。
html
<div class="square_box_shadow"></div>
css
.square_box_shadow {
width: 100px;
height: 100px;
background-color: #39a9d6;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
}
設定方法
指定方法
box-shadow: 水平方向 垂直方向 ※ぼかし ※広がり ※色 ※影の向き（※省略可）
値
- 数値
- px / em 等で指定
- 広がり
- マイナスの指定可。マイナスを指定すると影が縮小。
色
- 色指定
- 「#000000」（色コード）又は「カラーネーム」（red や gray 等）
- rgba
- 「rgba」を使用して透明度の指定可
影の向き
- inset
- 影の向きを内側に変更
inset（内側）
html
css
.square_box_shadow2 {
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5) inset;
}
サンプル1
html
css
.square_box_shadow3 {
box-shadow: 10px 20px 20px -10px rgba(0, 0, 0, 0.5);
}
