CSS3

：

プロパティ

：

border-image-source

　 編集：2022.07.14 by T.A.

→●、mdn

ボーダー画像のソース。

名前 border-image-source
値 none | <image>
初期値 none
適用対象 すべての要素 ─ ただし、［border-collapse が collapse にされた table における、内部 table 要素］を除く。
継承 されない
百分率 受容しない
算出値 キーワード none ／ <image> の算出値
アニメーション型 離散的

［border-＊-style で与えられるボーダー スタイル］による描画の代わりに利用する画像を指定し、border-image-slice に fill キーワードも供されている場合には、要素に対する追加の後景画像も指定する。値が none、または画像を表示できない（またはプロパティが適用されない）場合、ボーダー スタイルが利用され、そうでなければ、ボーダー スタイルによるボーダーは描かれず、以下の節に述べるようにボーダー画像が描かれることになる。

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


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


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


開始<SPAN style="
 border:20px solid;
 border-image:linear-gradient(red,yellow);
">テスト</SPAN>終了


開始<SPAN style="
 border:20px solid;
 border-image:linear-gradient(red,yellow);
 border-image-slice:33%;
 border-image-repeat:stretch;
">テスト</SPAN>終了

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：