CSS【 border-image 】 ~ 画像ボーダー

Thin line vector modern geometric frames with place for your text.

CSS3で追加されたborder-imageプロパティを使うと、ボックスのボーダーに画像を表示することができます。
ボーダーに画像を取り入れると、自由でユニークな枠線を作ることができます。
今回は、border-imageプロパティについてまとめたいと思います。

目次

1.画像ボーダーのプロパティ
2.border-image-source
3.border-image-slice
4.border-image-repeat

1.画像ボーダーのプロパティ

画像ボーダーを作る際には、次のプロパティを使用します。

border-image-source 使用する画像ファイルのURLを指定
border-image-slice 画像の使用範囲を指定
border-image-width 画像ボーダーの幅を指定
border-image-outset 画像ボーダーの領域を外側に広げる
border-image-repeat ボーダー画像の繰り返し方法を指定
border-image 画像ボーダーのショートハンドプロパティ

これから次の画像を使って、画像ボーダーを作ってみたいと思います。
サイズは、縦90px、横90pxです。
colmun_image4165_01

▲目次へ戻る

 

2.border-image-source

border-image-sourceプロパティは、次のような書き方で表示する画像ファイルのURLを指定します。

border-image-source: “画像のURL”;

border-image-sourceプロパティの値は、次の通りです。

none 画像がない場合(デフォルト値)
画像のURL url (“画像のURL”)
相対パス、絶対パス、どちらでも指定可能

border-image-sourceプロパティの値は、継承されません。
また、border-image-sourceプロパティは、全ての要素で使用できます。

border-styleプロパティでボーダーの指定があって、border-widthプロパティに値が指定されている場合は、border-image-sourceプロパティの指定のみで、ボーダーとして次のように表示されます。

border-image-sourceのみを指定すると、
4つの角に指定した画像が表示されます。

ソースは次の通りです。

(CSS)
p#sample {
padding:1em;
border:solid 30px;
border-image-source:url(“img/img01.jpg”);}

(HTML)
<p id=”sample”>
border-image-sourceのみを指定すると、<br>
4つの角に指定した画像が表示されます。
</p>

▲目次へ戻る

3.border-image-slice

border-image-sliceプロパティで、画像を9つにスライスしてみます。

スライスは、次のようなイメージです。

colmun_image4165_01
この画像(縦90px、横90px)の上下左右の外側から30pxずつスライスしています。

 
スライスは、上の外側からの長さ、右の外側からの長さ、下の外側からの長さ、左の外側からの長さで指定します。
この4つの長さを指定すると、コーナーが4つ、辺にあたる領域が4つ、真ん中、の9つの領域に分けられます。

border-image-sliceプロパティのデフォルト値は100%ですので、画像全体がコーナーに表示されます。

border-styleプロパティでボーダーの指定があって、border-widthプロパティに値が指定されている場合は、先ほどのborder-image-sourceプロパティと、この border-image-sliceプロパティを指定することで、画像ボーダーらしくなります。

スライスとボーダーの幅は同じである必要はありません。
ボーダーの幅に応じて伸縮されます。

border-image-sliceプロパティの値は、次の通りです。

パーセント 画像の幅や高さに対しての%で指定(デフォルト値は100%)
数値 ピクセルの数値
単位なしで指定
fill 画像の中央部分をボックスの背景として表示するための指定
単独で指定することはできず、%や数値の値の後に半角スペースで区切って指定する

border-image-sourceプロパティの値は、継承されません。
また、border-image-sourceプロパティは、全ての要素で使用できます。

値は1~4つで、半角スペースで区切って指定します。
 

値が1つの場合 = 上下左右全て同じ値でスライス

先ほど、スライスのイメージとして表示したものが、このタイプです。

colmun_image4165_01
この画像(縦90px、横90px)の上下左右の外側から30pxずつスライス
border-image-slice:30;

ソースは次の通りです。

(CSS)
p#sample {
padding:1em;
border:solid 30px;
border-image-source:url(“img/img01.jpg”);
border-image-slice:30;}

(HTML)
<p id=”sample”>
<img src=”img/img00.jpg” />
この画像(縦90px、横90px)の上下左右の外側から30pxずつでスライス
</p>

 

値が2つの場合 = 上下(値1)、左右(値2)でスライス

colmun_image4165_01
この画像(縦90px、横90px)の上下の外側から30px、左右の外側から15pxでスライス
border-image-slice:30 15;

 

値が3つの場合 = 上(値1)、左右(値2)、下(値3)でスライス

colmun_image4165_01
この画像(縦90px、横90px)の上の外側から30px、左右の外側から15px、下の外側から20pxでスライス
border-image-slice:30 15 20;

 

値が4つの場合 = 上(値1)、右(値2)、下(値3)、左(値4)でスライス

colmun_image4165_01
この画像(縦90px、横90px)の上の外側から30px、右の外側から10px、下の外側から20px、左の外側から15pxでスライス
border-image-slice:30 10 20 15;

上の例(値4つを指定)にfillを追加指定すると、次のような表示になります。

colmun_image4165_01
この画像(縦90px、横90px)の上30px、右10px、下20px、左15pxでスライス後、fillを追加指定
border-image-slice:30 10 20 15 fill;

▲目次へ戻る

 

4.border-image-repeat

border-image-repeatプロパティは、ボーダーの辺にあたる領域の繰り返し方法を指定します。

border-image-repeatプロパティの値は次の4つで、2つまで指定できます。
値を1つ指定した場合は、上下左右全て同じ値となり、値を2つ指定した場合は、上下(値1)、左右(値2)の値となります。

stretch 画像の繰り返しなし(デフォルト値)
領域に合わせて、横の辺は横向きに、縦の辺は縦向きに引き伸ばされる
repeat 画像を繰り返して表示
round 画像を繰り返して表示し、領域に合うように、サイズ調整される
space 画像を繰り返して表示し、領域に合うように、スペース調整される

border-image-sourceプロパティの値は、継承されません。
また、border-image-sourceプロパティは、全ての要素で使用できます。
 

repeat

repeatは、辺の中心からリピートがスタートします。

colmun_image4165_01
この画像(縦90px、横90px)の上下左右の外側から30pxずつスライスしてリピート
border-image-repeat: repeat

ソースは次の通りです。

(CSS)
p#sample {
padding:1em;
border-style:solid;
border-width:30px;
border-image-source:url(“img/img01.jpg”);
border-image-slice:30;
border-image-width:1;
border-image-outset:0;
border-image-repeat:repeat;}

(HTML)
<p id=”sample”>
border-image-repeat: <b>repeat</b>
</p>

 

round

roundは、横方向と縦方向に拡大縮小して、ボーダーのサイズに合わせてくれます。

colmun_image4165_01
この画像(縦90px、横90px)の上下左右の外側から30pxずつスライスしてリピート
border-image-repeat: round

 

space

space は、余白が入って調整されます。

colmun_image4165_01
この画像(縦90px、横90px)の上下左右の外側から30pxずつスライスしてリピート
border-image-repeat: space

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です