CSS3 のドロップシャドウと角丸でつまづきそうなところ
CSS3はとても便利なプロパティが満載ですが、まだまだ使い慣れていないため、へんなところでつまづいてしまいます。実際に作っていてドロップシャドウと角丸でハマってしまったところをメモ。
CSS3のドロップシャドウ
-moz-box-shadow:0 0 3px #cccccc; -webkit-box-shadow:0 0 3px #cccccc;
プロパティの内容は以下の通りです。
box-shadow: [横方向のオフセット] [縦方向のオフセット] [ぼかしの半径] [影の色]
上の例では3pxのシャドウ（#cccccc）がグローエフェクトのようにボックスの周りを囲みます。このときボックスレイアウトは左右に3px広がったと解釈されるようです。
つまりシャドウを指定しているボックスが300pxで指定されていれば306pxでレンダリングされるようです。センタリングされているコンテンツエリアとかであれば問題ないのですが、例えばウィンドウいっぱいに広がっているボックスにこのドロップシャドウをかけると横幅がオーバーフローして横スクロールが出てきてしまうことがあるみたいです。
回避するには、横方向のオフセットをぼかしの半径分ネガティブ指定する必要があります。
-moz-box-shadow:-3px 0 3px #cccccc; -webkit-box-shadow:-3px 0 3px #cccccc;
今後のボックスモデルには[ボーダー]／[パディング]に加えて[ドロップシャドウの幅]も勘案する必要があるのかもしれません。。（シャドウは通常のレンダリングフローから外してほしかったです。
角丸のプロパティ指定
CSS3のプロパティは先行実装されたブラウザでは[-webkit-]とか[-moz-]とかのプリフィクスをつける必要があります。ですが、それ以外にも書式が少し異なるという話。
Firefoxの場合は
-moz-border-radius-bottomleft:2px; [プリフィクス]-border-radius-[指定コーナー]
となっていますが、Safariの場合は
-webkit-border-bottom-left-radius:2px; [プリフィクス]-border-[指定コーナー]-[指定コーナー]-radius
となっています。順番とコーナーの指定方法が違うようです。
私はFirefoxベースで作成するので、最初に-moz-でスタイリングしてからそれをコピペしてプリフィクスを-webkit-に付け替えるのですが、border-radiusの個別指定はその方法でデザインが反映されません。おかげでダダハマりしてしまいました。。。
