CSSの使い方について解説する連載です。今回はCSS3で追加されたプロパティ、box-shadowです。ボックス要素に立体的な影をつけることができるので、表現の幅を広げることができます。
box-shadowの指定方法
box-shadowを指定するには、下のように記述します。
box-shadow: 横方向の距離 縦方向の距離 （ぼかし） （広がり） （影の色） （影の向き）
必須なのは「横方向の距離」と「縦方向の距離」の2つで、他の値は省略することができます。
box-shadowの具体例
box-shadowを使った例を見ていきましょう。
縦横の距離のみ指定
「横方向の距離」と「縦方向の距離」、必須の2つだけを指定した場合です。
box-shadow: 10px 10px;
上の例では、影が右方向と下方向にできていました。左方向や上方向に影をつくりたい場合は、マイナスの値を指定してください。
ぼかし
上記に加えて、「ぼかし」も使った場合です。
box-shadow: 10px 10px 10px;
縦横の距離を0pxにした場合は、下のようになります。
box-shadow: 0px 0px 10px;
広がり
広がりを指定した場合です。
box-shadow: 5px 5px 0px 5px;
「広がり」だけを指定した場合は、下のように四方向に広がります。
box-shadow: 0px 0px 0px 5px;
影の色
影の色を変更することも可能です。指定しない場合は、黒でつくられます。
box-shadow: 0px 0px 0px 5px #0000ff;
RGBaを使うことで、透明度（アルファ値）を指定することも可能です。
影の向き（inset）
デフォルトでは影はボックスの外側にできますが、「影の向き」を指定するとボックスの内側に影がつくれます。
box-shadow: 0px 0px 0px 5px #111 inset;
外側にも内側にも影を作りたい場合は、半角カンマで区切って下のように指定します。
box-shadow: 0px 0px 0px 5px #111, 0px 0px 0px 5px #111 inset;
あとがき
CSS3のbox-shadowプロパティの使い方についてご紹介しました。CSSのデザインの幅が広がるので、上手く利用していきましょう。