画像ボーダーのを９スライスを設定する

CSS - border-image-slice

概要

CSSプロパティ｢border-image-slice｣は、border-image-source プロパティで定義された画像ボーダーを、４隅４辺と中央の９つの領域に分ける際に使用します。

<div class="border-image slice">ボーダーに画像を挿入しています</div>
<style>
div {
 border: 10px solid #def;
 margin-bottom: 10px;
}
.border-image {
 border-image-source: url("https://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample.png");
 border-image-repeat: repeat;
}
.slice {
  border-image-slice: 24;
}
</style>

画像のボーダー使用範囲について

画像の使用範囲についてですが、このプロパティで使われる画像は最大4つの値を与えて、縦３つ×横３つの計9つのイメージパーツに分割されます。わかりやすい例として、縦72px, 横72pxの画像に対して、それを３分割した値｢24｣を指定すると、以下のような場所で区切られるイメージです。

ちなみに分割された画像がどの場所にどの画像が使用されているか確認しててください。画像に番号を振って表示させてみます。

<div class="border-image slice">ボーダーに画像を挿入しています</div>
<style>
div {
 border: 20px solid #def;
 margin-bottom: 10px;
}
.border-image {
 border-image-source: url("https://www-creators.com/wp-content/uploads/2017/11/cssp_border_image_sample_number.png");
 border-image-repeat: round;
}
.slice {
  border-image-slice: 24;
}
</style>

値の指定方法

値は１つから4つ指定することができます。

{ border-image-repeat: 値（１つから4つ） }

四辺の値について

４辺というのは「上」、「下」、「左」、「右」を指し、まとめて記述することも、一つづつ指定することも可能です。値が１つの場合はその値が４辺全てに反映され、２つの値をいれると「上下」、「左右」に反映されます。更には、４つの値を入れた場合は「上」「右」「下」「左」と、時計回りの順序で指定が反映されます。

値 説明
プロパティ名: 5px 「上下左右」に5pxの値を指定します。
プロパティ名: 5px 10px 「上下」に5px、
「左右」に10pxの値を指定します。
プロパティ名: 5px 10px 15px「上」に5px、
「左右」に10px、
「下」に15pxの値を指定します。
プロパティ名: 5px 10px 15px 20px 「上」に5px、
「右」に10px、
「下」に15px、
「左」に20pxの値を指定します。

値について

指定できる値の種類と、実際の表示です。

値説明
数値 + 単位 px, em, パーセントなど。
数値 のみ 座標値を指定されます。画像の場合はピクセル値が入ります。
fill指定すると、真ん中部分も画像ボーダーが入ります。初期値では空白になっている。

プロパティの種類について

｢border-image-slice｣ プロパティは、border-image を細分化したプロパティです。こちらの一覧で全体を確認しておきましょう。

プロパティ名説明
border-image-source画像の参照元を指定する
border-image-slice画像のボーダー使用範囲を指定する
border-image-repeat画像ボーダーの繰り返しを指定する
border-image-width画像ボーダーの太さ（内側に向かう）を指定する
border-image-outset画像ボーダーイメージエリア（外側に向かう）を指定する

仕様書

関連CSSプロパティ