CSS3 ボックスに影をつける box-shadow

ボックスに影をつけるプロパティがbox-shadowです。
※ IE否対応、デモにはPIE.htcを導入

   box-shadow: [inset] 縦距離 横距離 ぼかし距離 広がり距離 影の色;

[inset]がなければ外側の影、つければ内側の影になります。
縦距離と横距離は影の大きさになります。
ぼかし距離はぼけ方の強さになります。
広がり距離は全方向への広がりになります。

■ 外側の影指定

.bshadow {
   box-shadow: 5px 5px 3px #666;
}

■ 内側の影指定

.bshadow {
   box-shadow: inset 5px 5px #999;
}

■ 内外の両方の影指定

.bshadow {
   box-shadow: 0 0 3px 3px #666, inset 0 0 15px 10px #EC0082;
}

DEMO

Tags: CSS3