CSS3の-box-shadowで個人的にハマったところ

css

最近よくCSS3のbox-shadowを使ったサイトをよく見る。
むしろ使ってないサイトはないんじゃないかってくらい使われている。
TwitterとかBloggerとかmixiとか...
地味だから気づかない人は気づかないだろうけど。


使ってみて2点ハマったのでメモ。

Firefoxでは横方向のオフセットを0にしても、横方向に影がついてしまう

症状

影を付けたボックス要素をwidth:100%とかにしてると、横スクロールが発生するので困ったことになる。

対策

ぼかし分、横方向のオフセットをマイナス値で指定してあげる。

-moz-box-shadow: -3px 1px 3px #000;

Chromeで影が表示されない

症状

webkit-box-shadowを指定しているのに、Chromeでは影が表示されない

対策
-moz-box-shadow: 1px 1px 3px #000;　/* Firefox用 */  
-webkit-box-shadow: 1px 1px 3px #000;　/* Safari,Google Chrome用 */

この順番で書いている人は

-webkit-box-shadow: 1px 1px 3px #000;　/* Safari,Google Chrome用 */
-moz-box-shadow: 1px 1px 3px #000;　/* Firefox用 */

先に-webkit-box-shadowを持ってくる


cssとか書かないからあれだけど、
これだけでもクロスブラウザってめんどくせーとか思った。

special thanks