1枚の画像からサイズ可変な罫線を表示する（2）：FirefoxとSafariのCSS

中央の画像の表示

　ここまでのサンプルを見てくると、中央の画像は各辺の表示方法と連動して表示されていることがわかる。中央の画像の水平方向の表示方法は上下の辺、垂直方向の表示方法は左右の辺と連動しており、repeatやroundと指定した場合は繰り返し、stretchと指定した場合は伸縮して表示される。中央の画像だけ独立して表示方法を指定することはできないので、注意が必要だ。

オプションを「repeat stretch」と指定した場合、中央の画像の水平方向は繰り返し、垂直方向は伸縮して表示される

div	{
	-webkit-border-image: url("waku.png") 18 18 18 18 / 18px repeat stretch;
	}

背景画像の利用

　中央の画像を各辺の表示と切り離してコントロールしたい場合には、背景画像を利用するという方法がある。その場合、罫線の画像は中央の画像部分を透過して作成しておく。ここでは、罫線の画像として白色の部分を透過したwakublue.pngを使用する。また、中央に表示するための画像としてbk.pngを用意して、背景画像として表示する。

wakublue.png

bk.png

Safari 3での表示

div	{
	-webkit-border-image: url("wakublue.png") 20 20 20 20 / 20px;
	background-image: url(bk.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	-webkit-background-origin: border;
	-webkit-border-radius: 18px;
	width: 300px;
	padding-bottom: 50px;
	}

　なお、-webkit-background-originプロパティでは、背景画像を罫線の下の位置から表示するように指定している。また、-webkit-border-radiusプロパティでは、背景画像の角を丸くして、罫線の角丸と形が一致するように指定している。-webkit-border-radiusプロパティについては、第3回と第4回の記事を参照してほしい。また、-webkit-background-originプロパティについては、本連載の中で改めて紹介したいと思う。