CSS の border-image-slice プロパティは border-image-source で指定された画像を複数の領域に分割します。これらの画像は要素の境界画像を構成する部品として使用されます。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
分割する過程で、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>
仕様策定状況
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 border-image-slice の定義 |
勧告候補 | 初回定義 |
| 初期値 | 100% |
|---|---|
| 適用対象 | すべての要素。ただし border-collapse が collapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。 |
| 継承 | なし |
| パーセンテージ | ボーダー画像のサイズ |
| メディア | 視覚 |
| 計算値 | 1 つから 4 つのパーセンテージ値（指定値）または絶対的な長さ。指定されていれば続けてキーワード fill |
| アニメーションの種類 | 個別 |
| 正規順序 | the percentages or lengths, eventually followed by the keyword fill |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | 4.1 -webkit- | ? | あり | 151 2 3 4 | ? | ? | ? |
1. Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).
2. Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).
3. From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809).
4. Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).