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;
}

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

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

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


イベント

購読

平日・毎朝更新中