CSSボーダー画像

❮ 前次 ❯

CSSボーダー画像

CSSborder-imageプロパティを使用すると、要素の周囲の境界線として使用する画像を設定できます。

CSSborder-imageプロパティ

CSSborder-imageプロパティを使用すると、要素の周囲の通常の境界線の代わりに使用する画像を指定できます。

プロパティには3つの部分があります。

境界線として使用する画像
画像をスライスする場所
中央のセクションを繰り返すか伸ばすかを定義します

次の画像（「border.png」と呼ばれます）を使用します。

プロパティは画像を取得し、三border-image目並べのように9つのセクションにスライスします。次に、コーナーをコーナーに配置し、指定したとおりに中央のセクションを繰り返したり、伸ばしたりします。

注：機能するにはborder-image、要素に borderプロパティセットも必要です。

ここでは、画像の中央のセクションを繰り返して境界線を作成します。

ボーダーとしてのイメージ！

コードは次のとおりです。

例

#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}

ここでは、画像の中央部分が引き伸ばされて境界線が作成されます。

ボーダーとしてのイメージ！

コードは次のとおりです。

例

#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}

ヒント：border-imageプロパティは、実際には、、、、およびプロパティの border-image-source省略形 border-image-sliceのプロパティです。border-image-widthborder-image-outsetborder-image-repeat

CSSborder-image-異なるスライス値

スライス値が異なると、境界線の外観が完全に変わります。

例1：

border-image：url（border.png）50ラウンド;

例2：

border-image：url（border.png）20％ラウンド;

例3：

border-image：url（border.png）30％ラウンド;

コードは次のとおりです。

例

#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}

#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}

#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}