border-image-slice

CSS の border-image-slice プロパティは border-image-source で指定された画像を複数の領域に分割します。これらの領域は境界画像の部品を構成します。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

分割する過程で、4つの角、4つの辺、それに中央領域の計9つの領域を作成します。それぞれの辺からの距離で設定される4本の分割線が、領域の寸法を制御します。

上の図は、それぞれの領域の位置を説明しています。

• 1-4 の領域は角の領域です。それぞれが1回ずつ使用され、最終的な境界画像の中で四隅を形成します。
• 5-8 の領域は 辺の領域です。これらは最終的な境界画像の中で、要素の寸法に合わせて反復、拡縮、その他の加工が行なわれます。
• 9 の領域は中央領域です。既定では描画されませんが、キーワード fill がセットされていれば背景画像のように使用されます。

border-image-repeat, border-image-width, border-image-outset の各プロパティは、最終的な境界画像を構成するためにこれらの領域が使用される方法を指定します。

構文

/* すべての辺 */
border-image-slice: 30%;

/* 上下 | 左右 */
border-image-slice: 10% 30%;

/* 上 | 左右 | 下 */
border-image-slice: 30 30% 45;

/* 上 | 右 | 下 | 左 */
border-image-slice: 7 12 14 5; 

/* `fill` キーワードの使用 */
border-image-slice: 10% fill 7 12;

/* グローバル値 */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;

border-image-slice プロパティは1つから4つの <number-percentage> 値を使用して指定することができます。負の値は無効です。実際の寸法よりも大きい値は 100% に丸められます。

• 位置が1つ指定された場合、全4本の分割線がそれぞれの辺から同じ距離で作成されます。
• 位置が2つ指定された場合、1つ目の値を上下の辺からの距離として、2つ目を左右の辺からの距離として分割線を作成します。
• 位置が3つ指定された場合、1つ目の値を上の辺からの距離として、2つ目を左右の辺からの距離、3つ目は下の辺からの距離として分割線を作成します。
• 位置が4つ指定された場合、上、右、下、左の順（時計回り）でそれぞれの辺からの距離として分割線を作成します。

fill の値は任意で、使用する場合は、宣言のどこにおいても構いません。

値

<number>

縁からのオフセットを、ラスター画像の場合はピクセル数で、ベクター画像の場合は座標で表します。ベクター画像の場合、数値は元の画像の寸法ではなく、要素の寸法に対する相対値になるので、この場合は一般にパーセント値の方が適しています。

<percentage>

縁からのオフセットを、元の画像の寸法、つまり水平方向のオフセットであれば画像の幅、垂直方向のオフセットであれば画像の高さに対するパーセント値で表します。

fill

中央の画像領域を維持し、背景画像のように表示しますが、実際の background の上に重ねられます。幅と高さは、画像領域のそれぞれ上と左に一致するように拡縮されます。

形式文法

<number-percentage>{1,4} && fill?
where 
<number-percentage> = <number> | <percentage>

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• 1～4つの値による構文の図による説明