【CSS】box-shadowのよく使うサンプル

コーディング
スポンサーリンク

box-shadowはとてもよく使うCSSですが、「あれ?どうだったけ?」とよく迷うことがあるのでよく使うものをまとめてみました。

box-shadowの使い方

box-shadow:左右の向き,上下の向き,ぼかし,広がり,色,内側

これだけだとよくわからないので以下、サンプルコードです。

 

See the Pen
bGwvabr
by nzm (@nzm)
on CodePen.

See the Pen
dypmJYY
by nzm (@nzm)
on CodePen.

See the Pen
PoGREwp
by nzm (@nzm)
on CodePen.

See the Pen
ZEpxvYq
by nzm (@nzm)
on CodePen.

See the Pen
ExgEoaJ
by nzm (@nzm)
on CodePen.

See the Pen
dypmJoo
by nzm (@nzm)
on CodePen.

See the Pen
BaLrJNZ
by nzm (@nzm)
on CodePen.

影の色は全て黒のままですが、向きやぼかしの指定のあとに色のコードを足すことで影の色を変更することができます。

コメント

タイトルとURLをコピーしました