CSSで影をつけるbox-shadowプロパティの使い方

box-shadowプロパティを使うと、簡単にボックスに影を付けることができます。

デザインの幅を広げる上で、とても重宝するプロパティなので、是非覚えておきましょう。

box-shadowプロパティの使い方

まず基本的な記述の仕方を見ていきます。

この様に、box-shadow: 横方向 縦方向; を追加するだけで、簡単に影をつけられます。例を見てみましょう。

まず、box-shadowを使用してない状態です。

これに、box-shadowを追記してみます。

このように、影を付けることができました。

今回は縦方向横方向それぞれに5pxと記述しましたが、見てわかる様に右側と下側に影が付いています。

デフォルトだとこの様になるので、影を上側や左側に向けてつけたい場合は、マイナスの値で指定します。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集

イベント

購読

平日・毎朝更新中