CSS3

プロパティ

border-image

→●、mdn

ボーダー画像： 略式プロパティ。

これは、［border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat］を設定するための略式プロパティである。値が省略されたものは、その初期値に設定される。

開始<SPAN style="
 border:30px solid;
 border-image:url(Com/BorderImage9.png) 20 /15px repeat;
">テスト</SPAN>終了

BorderImage9.png：（横20px×3列、縦20px×3行。透過）

border-image-sourceの値

開始<SPAN style="
 border:30px solid;
 border-image:url(Com/Picture_I.gif);
">テスト</SPAN>終了

開始<SPAN style="
 border:30px solid;
 border-image:url(Com/BorderImage9.png);
">テスト</SPAN>終了

border-image-sliceの値 [ / border-image-widthの値 | / border-image-widthの値? / border-image-outsetの値 ]?

開始<SPAN style="
 border:30px solid;
 border-image:url(Com/BorderImage9.png) 20;
">テスト</SPAN>終了

開始<SPAN style="
 border:30px solid;
 border-image:url(Com/BorderImage9.png) 20;
">テスト</SPAN>終了

開始<SPAN style="
 border:30px solid;
 border-image:url(Com/BorderImage9.png) 20 /10px;
">テスト</SPAN>終了

開始<SPAN style="
 border:30px solid;
 border-image:url(Com/BorderImage9.png) 20 /10px /2mm;
">テスト</SPAN>終了

border-image-repeatの値

開始<SPAN style="
 border:30px solid;
 border-image:url(Com/BorderImage9.png) 20 repeat;
">テスト</SPAN>終了

テスト