box-shadowプロパティを使うと、簡単にボックスに影を付けることができます。
デザインの幅を広げる上で、とても重宝するプロパティなので、是非覚えておきましょう。
box-shadowプロパティの使い方
まず基本的な記述の仕方を見ていきます。
|
1 2 3 |
box要素{ box-shadow: 横方向 縦方向; } |
この様に、box-shadow: 横方向 縦方向; を追加するだけで、簡単に影をつけられます。例を見てみましょう。
まず、box-shadowを使用してない状態です。
|
1 2 3 4 5 6 7 |
p.test1 { width:50px; height:50px; background-color:rgba( 243, 255, 255, 0.60 ); padding: 10px; border:1px solid #000; } |
これに、box-shadowを追記してみます。
|
1 2 3 4 5 6 7 8 |
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と記述しましたが、見てわかる様に右側と下側に影が付いています。
デフォルトだとこの様になるので、影を上側や左側に向けてつけたい場合は、マイナスの値で指定します。
