border-image の実験

画像でボーダーをしく実験。CSS3のborder-imageを使用します。

次の画像は、この実験で使用している実験用のボーダー画像です。


基本的な使い方

borderimg01
borderimg01
幅を120pxで指定してみた。
borderimg01
幅を180pxで指定してみた。

背景色と組み合わせてみる実験

borderimg02
背景色を同時に指定してみたが、ボーダー画像が手前に表示されるようだ。
border-imageに対応していないブラウザのために、背景色も指定しておいた方がよいかも知れない。

ボーダーと組み合わせてみる実験

borderimg03
border-image は、border-styleborder-color より優先されるようだ。
border-imageに対応していないブラウザのために、普通のボーダーも指定しておいた方がよいかも知れない。

4つの数値を変えてみる実験

borderimg04
border-image の4つの値を変えてみた。
幅が 上辺、右辺、底辺、左辺 の順に指定されている。