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

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

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

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

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

box要素{
　　　　　box-shadow: 横方向 縦方向;
}

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

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

p.test1 {
　　　　　width:50px;
　　　　　height:50px;
　　　　　background-color:rgba( 243, 255, 255, 0.60 );
　　　　　padding: 10px;
     　　border:1px solid #000;
}

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

p.test1 {
　　　　　width:50px;
　　　　　height:50px;
　　　　　background-color:rgba( 243, 255, 255, 0.60 );
　　　　　padding: 10px;
　　　　　border:1px solid #000;
　　　　　box-shadow:5px 5px;
}

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

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

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