box-shadowがうまく適用されない

CSS3のおかげで簡単に角丸やドロップシャドウなどができるようになったので、デザインやレイアウトの幅が一気に広がりました。
しかしですね、コンテンツの背景に影をつけた時に予期せぬことが起こりました!
なぜかいくら上下左右の広がりを指定しても、思った通りに影が伸びてくれないのです。
一見コーディングミスっぽいところもなく…


結論から言いますと、コンテンツに指定していたoverflow:hidden;が原因でした。
コンテンツの中にあるサムネイル画像にfloatをかけていたので、overflowとpositionで解除していたのがマズかったみたいです。
なんてことない、float解除の選択ミスでした。

フロートは疑似クラスで解除しよう

floatの解除方法のまとめでfloat解除について2つ方法を書いていたうちの1つです。
floatをかけた要素の親要素に:afterの疑似クラスをつけて、contentで仮想コンテンツをつくり、そこにフロート解除を指定します。

HTML
<div id="content">
<ul>
<li>コンテンツ1</li>
<li>コンテンツ2</li>
<li>コンテンツ3</li>
</ul>
</div>
CSS
#content:after{
content:"";
display:block;
clear:both;
}

overflowはどうしても疑似クラスが使えないコーディング、疑似クラスが反映されないブラウザの場合の最終手段にとっておきましょう!
ちゃんとしたコーディングを知るきっかけになったので、CSS3が導入されてよかったです。