border-imageの使い方
囲みの枠線(境界)を、⇩
border-image ５つのCSSプロパティ
border-image-source
境界画像の元画像の設定をします。画像の置いてあるurlを指定します。
border-image-source: url(画像のURL);
・画像のURLをコピーして()内へ貼り付けます。
・URLの取得はアメブロの場合はこちら
border-image-slice
画像を分割して、境界の部品を作ります。
A～Fの９個の領域に分割されます。
A～Fの領域の大きさは、top、right、bottom、left、の順で図の矢印の間の長さで指定します。
A～Eは、4つの数字で指定すれば枠として表示されます。枠の内側Fも表示するには「fill」を指定します。
border-image-slice: 値; /*全て同じ長さ*/
border-image-slice: 値1 値2; /*上下 左右*/
border-image-slice: 値1 値2 値3; /*上 左右 下*/
border-image-slice: 値1 値2 値3 値4; /*上 右 下 左*/
border-image-slice: 値 fill; /*全て同じ長さ 中(F)も表示*/
値
数値は縁からのオフセット値（座標を表す絶対値）になります。ベクター画像では、％で表します。ラスター画像では、pxを表しています。ただし、pxなどの単位を書くとうまく動作しません。数字のみで書きます。数字と数字の間には半角スペースを入れて区切ります。
border-image-repeat
画像枠の中間部（E）の繰り返し方を設定します。
border-image-repeat: stretch; /*中間部引き延ばし*/
border-image-repeat: repeat; /*繰り返し半端は切り継ぎで埋める*/
border-image-repeat: round; /*繰り返し半端は引き延ばして埋める*/
border-image-repeat: space; /*繰り返し半端は空白にする*/
border-image-repeat: round stretch; /*上中下・左右別途繰り返し*/
border-image-width
画像枠の境界幅を設定します。代替border幅の設定がない場合、border=0ですから、padding 部分にはみ出します。（padding が狭くなります。）
border-image-width: 値; /*全て同じ長さ*/
border-image-width: 値1 値2; /*上下 左右*/
border-image-width: 値1 値2 値3; /*上 左右 下*/
border-image-width: 値1 値2 値3 値4; /*上 右 下 左*/
値
値は長さで、1～4つ指定することができます。初期値は０ですから、この値を設定しないと、画像枠は表示されません。
border-image-outset
画像枠の境界幅を設定します。
要素の margin 部分にはみ出す幅になります。
border-image-outset: 値1 [～値4]; /* width と同じ*/
border-image
source ～ outoset までをまとめて指定することができます。
border-image: url(画像のURL) 16 fill / 16px / 8px round;
※border-image-width と border-image-outset の値は「/」で区切る必要があります。
枠の幅を16px、margin部分へのはみ出しを8pxにした例です。前書きの画像枠が表示例です。
代替 border のCSSプロパティ
画像枠が認識されず、表示されないときの代替の境界枠を用意します。
border-type
画像枠が認識されず、表示されないときの代替の境界枠となります。border の線の種類を個別指定するプロパティですから、線の種類だけ指定します。
border-type: double; /*2本線を指定*/
border-width
境界枠の幅を指定します。長さを書きます。
画像枠の幅にも適応されますから、border-image の width や outset の設定を調節するよりも簡単にセットできます。
border-width: 10px; /*全て10px幅*/
使用例
CSS
border-image: url(画像のURL) 20 fill round;
border-type: solid; /*代替境界には１本線を指定*/
border-width: 20px; /*境界線の幅を指定*/
表示
width と outset の設定は代替 border の設定で済ませ、省略しています。「fill」薄い緑色の中も表示するため指定しています。
この書き方が、最も簡明、簡単です。