背景画像を角丸のボックスとボーダーに表示させる

角丸ボックスに背景画像を配置してボーダーの表示・非表示で確認する

ボックスに「background-image:url (backg.png);」を追記して、背景画像を指定するとFirefoxは通常の矩形で表示される。つまり、角丸ボックスの表現では背景画像が使用できないことになる。SafariおよびGoogle Chromeは角丸のまま表示される【9】。

border: none;を削除して、ボーダーを表示させた場合も同様だ。Firefoxでは、ボーダーからはみ出るように背景画像がそのまま表示されてしまう【10】。CSS 2で同様の表現を実現するには、複数の画像パーツを作成しなければならない。また、XHTMLにも視覚表現のためのdiv要素などが必要になってくる。border-radiusプロパティが、OperaやIEの最新版でもサポートされるようになれば、作業が効率化され、角丸表現はすべてCSSで管理することが可能になる。




【9】Firefoxでは背景画像を指定すると、背景がそのまま表示されてしまう。SafariおよびGoogle Chromeは角丸ボックスで表示される


【10】このような背景画像をひとつ作成しておけば、CSSの簡単な指定だけでビジュアル性の高いボーダーを表現することが可能だ

ボーダーに背景画像を配置してグラフィカルな角丸ボックスを表現

border-imageプロパティを使うと、ひとつの背景画像だけで簡単にリッチなボックス・ボーダーが表現できる。このプロパティを先行実装しているのは、SafariとGoogleChromだ（現在のFirefoxでは適用されない）。たとえば、「-webkit-border-image: url(radius.png) 30 30 30 30;」と記述した場合、4つの数値は上辺、右辺、下辺、左辺からの距離として反映される。また、「border-width: 40px;」のように記述すれば、ボーダーの太さを指定できる。サンプルのようなビジュアルなら、Adobe Illustratorで角丸の正方形を描き、Photoshopのべベル処理などを使えば、簡単にパーツを作成できる。




【11】border-imageプロパティは、SafariおよびGoogleChrom以外のブラウザでは使用できない



→インデックスページへ