【css】box-shadowで影をつける方法（内側/外側/パータン）

今回はcssのbox-shadowを使って基本的な影の付け方からいろいろなパターンの影の付け方を紹介していきたいと思います。

box-shadowはよく使うcssでもあるので覚えておくと良いです。

そもそもbox-shadowとは何？

boxshadowは影を付けることのできるプロパティになります。

また影は外側だけでなく内側にも設定することができます。

box-shadow: 左右の向き 上下の向き ぼかしの大きさ 広がりの大きさ 色指定 内側の指定;

box-shadow: 10px 20px 5px 0px #5bc0de;

box-shadow: 12px 12px 14px #000;

box-shadow: 14px 14px;

box-shadow: 12px 12px 14px inset;

box-shadow: 0 0 8px #000;

box-shadow: 4px 4px 4px 6px rgba(0,0,0,0.3);

box-shadow: 13px 13px 16px -2px #333, 13px 13px 18px rgba(255,255,255,0.8) inset;