box-shadowの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)
目次
1.box-shadowとは?
box-shadowプロパティはボックスの影を指定する際に利用します。
値の指定方法は以下の通りです。
{ box-shadow: 値; }
値の指定方法
- 任意の数値+単位
- 色
- none
- inset
2.box-shadowの使い方
それではbox-shadowの使い方をみていきましょう。
以下のようにすることでボックスに薄い紫色の影が表示されます。
.box {
width: 300px;
height: 150px;
border: 1px solid blue;
box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
}
他にも値を設定できるのでいろいろと試してみることをオススメします!