« | »

2009.02.14

CSS3の角丸、影を試す

試すというか、ちょこっと導入。
角丸は2/11にも書いたけど「border-radius」。影は「box-shadow」の指定で、簡単に付けられる。
2010年あたりに勧告があるらしいんだけど、(この辺はよく分からない)、とりあえずSafariやFirefoxでは実装され始めてる。
ということで、ブラウザによる見え方の違い。



Google Chrome1.0.154.46。(新しいバージョンがあることに今気付いた)。

拡大画面。影も角丸も反映されている。
影はbox指定のCSSに

-webkit-box-shadow: 4px 4px 4px #888

角丸は
-moz-border-radius:10px;
-webkit-border-radius:10px;

と入れてある。

Firefoxのバージョン3.0.5。こちらも新しいバージョンがあることに今気付いた…。3.0.6にアップデートしても結果は同じだったからいいか。

角丸は反映されるが、影は反映されない。
-moz-box-shadow: 4px 4px 4px #888

としてもダメなので、まだ対応してないのだろう。

Sleipnir。エンジンはInternet Explorer。IEのバージョンは6.0.2。

角丸も影も反映無し。ちなみにWindows 7のIE8でも見てみたが、反映はされていなかった。
ちなみにGeckoエンジンに切り替えると、角丸だけ反映された。

MacのSafari。バージョン3.2.1。

角丸、影、ともに反映。
角丸も影も現行のCSS2で指定しようと思ったら画像を駆使してやらねばならず、大変なわけだけど、CSS3ならCSSの指定だけでこのように簡単に。デザイン的なセンスとかはおいといて、この手の見せ方が簡単にできるっていうのはいいよね。