box-shadowを使い始めて… Tweet

私のブログでCSS3のbox-shadowを使い始めてるのでお気づきの方も多いと思いますが、まだまだブラウザ間で表示に差異があるんですよね〜（そもそも対応していないIE8以前や、環境がないのでIE9では未確認、いずれWindows7を買ってVM環境上では使う事になると思いますが…）

<div>に以下のようなbox-shadowとborder-radiusプロパティを設定してあります。（関連部分のみ）

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;

-webkit-box-shadow:2px 2px 40px #000;
-moz-box-shadow:2px 2px 40px #000;
box-shadow: 2px 2px 40px #000;

各ブラウザで表示してみるとSafari5、Chrome8とFirefox3/4、Opera10で違いがでます。
Safari/Chromeは想定通りの陰になりますが、FirefoxやOperaだと陰が広がり過ぎて切れている部分がありますね。ちょっと気になった点なのでメモ書き。

（実際のところSafari/ChromeとFirefox/Operaのどちらの描画がただしいんだろー、Safariで調整しちゃってるからSafari/Chromeでの描画は見た通りなんだけど…）

・Safari5

・Chrome8

・Firefox3.6/4.0b

・Opera10.63