border-image-slice CSS プロパティとは
トピック：border-image-sourceで指定された画像を四隅、四隅、中央の9つの領域で分割することができる 通常、3つのグリッドを作成する4つの内側のオフセットを指定することで行う
プロパティ border-image-slice
実例 コード 1
サンプル コードを試す #webref{
border-image-slice: 30%;
}
情報：border-image-sliceプロパティは、border-image-sourceで指定された 、イメージをスライスする方法を指定 画像は常に4つのコーナー、4つのエッジ、および中央の9つのセクションにスライスされる
プロパティ 定義と使用法
| デフォルト値・初期値 : | 100% |
|---|
| 適用対象 : | 全要素。ただし border-collapse が collapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用される |
|---|
| 継承 : | 不可 |
|---|
| パーセンテージ : | ボーダー画像のサイズ |
|---|
| メディア : | visual |
|---|
CSS Version | CSS3 |
|---|
| 計算値 : | 1 つから 4 つのパーセンテージ値（指定値）または絶対的な長さ。指定されていれば続けてキーワード fill |
|---|
| JavaScript 構文 | object.style.borderImageSlice="30%" |
|---|
| アニメーションの種類 : | 個別 |
|---|
| 正規順序 : | パーセンテージまたは長さ、最後にキーワードが続くfill |
|---|
| CSSの構文 | border-image-slice: number |% |fill |initial |inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
number | ラスターイメージのピクセル数またはベクトルイメージの座標数を表す |
% | パーセンテージは画像の高さまたは幅に関連している |
fill | 画像の中央部分が表示される |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
border-image-slice プロパティは1つから4つの <number-percentage> 値を使用して指定することができる負の値は無効です実際の寸法よりも大きい値は 100% に丸められる- 位置が1つ指定された 、場合、全4本の分割線がそれぞれの辺から同じ距離で 作成 される 。
- 位置が2つ指定された 、場合、1つ目の値を上下の辺からの距離として、2つ目を左右の辺からの距離として分割線を作成する ことができる。
- 位置が3つ指定された 、場合、1つ目の値を上の辺からの距離として、2つ目を左右の辺からの距離、3つ目は下の辺からの距離として分割線を作成する ことができる。
- 位置が4つ指定された 、場合、上、右、下、左の順（時計回り）でそれぞれの辺からの距離として分割線を作成する ことができる。
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| border-image-slice | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯15 | フルサポート◯12 | フルサポート◯15 | フルサポート◯11 | フルサポート◯15 | フルサポート◯6 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| border-image-slice | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯4.1 | 不明 | フルサポート◯あり | フルサポート◯15 | 不明 | 不明 | 不明 |
|---|
CSS border-image-slice | CSS プロパティ 値| 意味 使い方 実例 – WebRef