« こんなところでもお目にかかるとは。 | トップページ | VirtualBox de Oracle11g R2 RAC #4 »

2010年12月 7日 (火)

box-shadowを使い始めて…

私のブログで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

Safari5

・Chrome8
Chrome8

・Firefox3.6/4.0b
Firefox36
Firefox40b

・Opera10.63
Opera10

|

トラックバック


この記事へのトラックバック一覧です: box-shadowを使い始めて…:

コメント

コメントを書く