box-shadowを極める

wrote : 2011.04.19

box-shadowプロパティは、その名から想像するとおり、ボックスエリアに影をつける（ドロップシャドウ）ことができます。

仕様

必須は、右方向下方向色。
外側、内側両方設定したい場合は、カンマ（,）区切りで記述します。

type1 外側にドロップシャドウ: box-shadow:5px 0 #000;
type2 色にアルファ（透明）指定が可能: box-shadow:5px 0 rgba(0,0,0,0.4);
type3: box-shadow:0 5px rgba(0,0,0,0.4);
type4: box-shadow:5px 5px rgba(0,0,0,0.4);
type5 シャドウをぼかす: box-shadow:5px 5px 5px rgba(0,0,0,0.4);
type6 シャドウを広げる: box-shadow:5px 5px 5px 5px rgba(0,0,0,0.4);
type7 シャドウを左上に: box-shadow:-5px -5px 5px 5px rgba(0,0,0,0.4);
type8 内側にシャドウ: box-shadow:5px 0 rgba(0,0,0,0.4) inset;
type9: box-shadow:0 5px rgba(0,0,0,0.4) inset;
type10: box-shadow:5px 5px rgba(0,0,0,0.4) inset;
type11: box-shadow:5px 5px 5px rgba(0,0,0,0.4) inset;
type12: box-shadow:5px 5px 5px 5px rgba(0,0,0,0.4) inset;
type13: box-shadow:-5px -5px 5px 5px rgba(0,0,0,0.4) inset;
type14 外側と内側にドロップシャドウ: box-shadow:5px 5px 5px 5px rgba(0,0,0,0.4),5px 5px 5px 5px rgba(0,0,0,0.4) inset;
type15: box-shadow:-5px -5px 5px 5px rgba(0,0,0,0.4),-5px -5px 5px 5px rgba(0,0,0,0.4) inset;

type14: box-shadow:5px 5px 5px 5px rgba(0,0,0,0.4),5px 5px 5px 5px rgba(0,0,0,0.4) inset;
-webkit-box-shadow:5px 5px 5px 5px rgba(0,0,0,0.4),5px 5px 5px 5px rgba(0,0,0,0.4) inset;

と書いてもよく分からないので、実際のサンプルで確認します。

このように、box-shadowを使用して外側にドロップシャドウする場合は、その前後のボックスの余白に気を配る必要があります。

IE8以下では、box-shadowは適用されません。
とはいえ、シャドウがかからなくても情報は正しく伝わるため、プログレッシブ・エンハンスメントを適用しシャドウが適用されないブラウザは残念、ということでぼくはやり過ごすことにします。

※border-styleプロパティの値として、ほかにも「none」「hidden」「dotted」「solid」があります。