CSS3の「border-image」プロパティを使ってborderが斜線の枠を作る

CSS3の「border-image」プロパティを使ってborderが斜線の枠を作る
2015/02/05

b
あまり使う機会はないかもしれませんが、上記のようにDIVの枠線をデザインしたい場合に使用します。

1)背景用の画像を作成する。今回は60px*60pxのサイズで作成しました。
(※3で割れるサイズで画像を作成した方が良いらしいです)

2)HTMLとCSS

//HTML
<div class="box01">
	<p>柄ボックス柄ボックス柄ボックス柄ボックス柄ボックス</p>
</div>
//CSS
.box01 {
	padding:10px;
	width:300px;
	height:100px;
	//いつも通りのborderの指定
	//border-image非対応のブラウザではこの指定が反映されます
	border: 6px solid #666;
	//border-image:画像パス サイズの指定 くり返しの指定
	border-image:url(img/borderimg.gif) 10 10 round;
}

・先にborder-imageプロパティが非対応のブラウザ用に通常のborder指定をします。
ちなみに、ie10以下は非対応らしいです。ほぼダメっすね。

・次にborder-image指定でそれぞれを指定。画像パスはわかるのですがそれ以外について追記しておきます。

・「10 10」の部分ですが、どうやらborder部分に表示される画像サイズの指定のようです。
今回であれば、
60px*60pxで作成した画像の10px*10px部分をくり返し表示
という感じでしょうか。
b01

・くり返し指定のプロパティは、今回はroundを使用してます。
くり返し指定の種類は全部で4種類あるようです。

くり返し指定の種類についての参考サイト:
http://www.htmq.com/css3/border-image-repeat.shtml

なので、今回の例でいうと
6pxのborderに60px*60pxで作成した画像の10px*10px部分を(6pxのborderに)ぴったり合わせて表示
ということかなと思います。
(※わかりにくかったので、私はそのように解釈しました。)

スポンサードリンク

ちなみにサイズ部分の数値を変更するとまた変わるので、使用するときは色々試してみた方がよいかと思います。

サイズの部分が「10 10」と「20 20」の場合
b02

//HTML
<div class="box01">
	<p>サイズのとこが「10 10」の場合</p>
</div>
<div class="box02">
	<p>サイズのとこが「20 20」の場合</p>
</div>
//CSS
.box01 {
	padding:10px;
	width:300px;
	height:100px;
	border: 6px solid #666;
	border-image:url(img/borderimg.gif) 10 10 round;
}
.box02 {
	padding:10px;
	width:300px;
	height:100px;
	border: 6px solid #666;
	border-image:url(img/borderimg.gif) 20 20 round;
}

DEMOで確認する

やや癖がある感じはしますが、スマホサイトなどはブラウザの制約があまりないので使えそうな気はします。

だいぶん参考にさせていただいたサイト:
border-image の使いどころや注意点
CSS3のborder-imageで、しましまの目立つ枠線を作る
【CSS3】 border-image を試してみた。

追記:
border-imageを早速スマホサイトで使ってみてたのですが会社のAndroidの標準ブラウザは非対応でした。
そういえば参考サイトにもそのようなことが載っていたような。。(Android4.3以下は正常に動かないこともあるそうな。。)
ということで、今回はやむなくdivの2重囲みで対応。
しばらくは仕事で使うのは難しいのかな~という印象でした。