CSS3のbox-shadowをメモ

CSS3から、box-shadowというプロパティが追加されたわけですが、実際に使ってみてこりゃ便利と思いましたので、備忘録も兼ねて記事に。

何が便利と思ったのかというと、例えば、固定幅のサイトの最外部に影を簡単に付けられるということが挙げられるかと思います。
今までは、その影をそれ用の画像を作って、リピートさせて表示というのをやっていましたが、box-shadowであればちょこちょこコードを書くだけで済むと。

box-shadowの基本

box-shadow-CSS3リファレンスより。基本的な書き方は、

box-shadow: [横方向のオフセット距離] [縦方向のオフセット距離] [ぼかし距離] [広がり距離] [色] inset;

となります。ぼかし距離と広がり距離は、指定しなくても動きます。insetを指定すると、ボックスの内側に影がつきます。

box-shadowのサンプル

幾つか。基本的に空のdivタグにいろいろCSSを書いています。

sample1のCSS


sample2のCSS

冒頭で紹介した、最外部に影をつけて…というやつは、オフセットを0にすることで実現できます。


sample3のCSS

カンマ区切りで、複数の影を指定できます。


sample4のCSS

3番目のコードを、順番を変えてみたもの。複数指定の場合、上に書いたものが優先されるようです。


sample5のCSS

プロパティを複数指定した時は、1バン最後に書いたものが優先されるようです。

IE9だけ違う

IE8以下は調べてないですが、border-radiusと組み合わせると、IE9だけ、FirefoxやChromeとはまたちょっと違った表示になるようです。

box-shadowとborder-radiusを組み合わせた時の挙動

上記の画像がそうで、FirefoxやChromeだと、内側にborder-radiusは適用されないのですが、IE9は適用されていて、中が白い四角ではないです。

GRC検索順位チェックツール*
順位チェックとサイト管理を1つのツールで!検索順位チェックツールGRC*

スポンサード・リンク

«
»
 

トラックバックURL

コメントを書き込む