CSS3 box-shadow ボックス要素に影をつける
今回は、CSS3の「box-shadow」について書きます。
box-shadowを使うと、ボックス要素に影をつける事ができます。
基本的な使い方は、こんな感じです。
box-shadow: 20px 30px;
/*box-shadow: 水平方向の長さ 垂直方向の長さ;*/
1番目の「20px」は、水平方向の長さで、2番目の「30px」は垂直方向の長さです。
実際のプログラムで使うと、こうなります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> <style> div { width: 200px; height: 200px; background-color: red; border: 5px solid orange; box-shadow: 5px 10px; } </style> </head> <body> <div id="maru"></div> </body> </html>
実行結果
さらに、影に「ぼかし」をつけることもできます。
「ぼかし」をつけるには3番目に数値を指定します。
box-shadow: 20px 30px 10px;
影の色も指定することができます。
このように指定します。
box-shadow: 20px 30px 10px rgba(51,51,51,0.6);
こういう書き方も大丈夫です。
box-shadow: 20px 30px rgba(51,51,51,0.6);
3番目の「ぼかし」を削除しています。
影全体の幅も調節できます。
box-shadow: 20px 30px 10px 25px rgba(51,51,51,0.6);
4番目に指定すると、影全体の幅を調節できます。
最後に・・・
影は複数つけることができます。
box-shadow: 20px 30px 10px rgba(51,51,51,0.6),
5px 5px 5px blue,
10px 10px 5px red;
「,」で区切ると、複数つけることができます。
参考サイト
box-shadow-CSS3リファレンス