CSS3 border-image Property

例

要素の周囲に境界線などの画像を指定します。

#borderimg {
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

»それを自分で試してみてください

もっと"Try it Yourself"以下の例。

定義と使用法

ボーダー-imageプロパティを使用すると、代わりに要素の周りに通常のボーダーを使用する画像を指定することができます。

ボーダー-imageプロパティを設定するための簡略記述特性であるボーダー画像ソース、ボーダー・画像スライス、ボーダー画像幅、ボーダー像初めとボーダー・画像・リピートプロパティを。

省略値はデフォルト値に設定されています。

デフォルト値：	none 100% 1 0 stretch
継承されました：	no
アニメーション：	no. Read about animatable
バージョン：	CSS3
JavaScriptシンタックス：	object .style.borderImage="url(border.png) 30 round" Try it

ブラウザのサポート

表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。

-webkit-続い番号、-moz-、または接頭辞で働いていた最初のバージョンを指定して-O-です。

プロパティ
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -O-

注：以下の各値に対して個別のブラウザのサポートを参照してください。

CSSの構文

border-image:source slice width outset repeat|initial|inherit;

プロパティ値

値	説明	それを再生します
border-image-source	境界として使用する画像へのパス
border-image-slice	境界画像をスライスする方法	それを再生します»
border-image-width	ボーダー画像の幅
border-image-outset	境界画像領域の境界ボックスを越えて延在する量
border-image-repeat	境界画像が繰り返されるべきであるかどうかは、丸めたり伸ばし	それを再生します»
initial	このプロパティがデフォルト値に設定します。初期についての記事を読みます
inherit	その親要素からこのプロパティを継承します。継承についての記事を読みます

その他の例

例

異なるスライス値は、完全に境界線の外観を変更します。

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(border.png) 30% round;
}