Apr. 23rd,2021
プロパティについて
＃
概要
| 初期値 | “border-image-slice: 100%;” |
| 適用対象 | すべての要素(ただし、“border-collapse: collapse;”であるテーブル内部要素を除く) |
| 継承 | No |
| パーセント値 | 境界線用画像の横幅もしくは高さを“100%”とする |
| 計算値 | それぞれが数値かパーセント値である4個の値、指定されていれば“fill” |
| アニメーション | 計算値 |
“border-image-slice”プロパティは境界線用画像の分割方法を指定するプロパティです。
“border-image-source”プロパティで指定された境界線用の画像は4本の分割線によって9つの断片に分割され、それぞれの断片が境界線の4つの角と4つの辺、それと追加の背景画像として用いられます。“border-image-slice”プロパティは分割線の位置を指定します。
分割された境界線用画像が実際に表示される大きさは“border-image-width”プロパティで指定できます。
サンプルコード
div { border-image-slice: 200;}
＃
値
| 値 | 説明 |
|---|---|
| <percentage> | 境界線用画像の横幅もしくは高さを“100%”として分割線の位置を指定 |
| <number> | 境界線用画像がラスター画像であればピクセル数、ベクター画像であれば座標で分割線の位置を指定 (ピクセル数の単位(“px”)は不要です。) |
| fill | 中央の領域を保持する (追加の背景として描画します。“background”プロパティによる背景があればその上に重ねて描画されます。) |
| 共通キーワード |
算出される値が画像の大きさを超える場合は“100%”とみなされます。
＃
値の指定方法
分割位置の指定
分割線の位置は境界線用画像の端からそれぞれの分割線までの距離で指定します。
値が1つの場合は4つすべての分割線の位置となります。
div { border-image-slice: 〚画像の端から分割線までの距離〛;}
また、複数の値をホワイトスペースで区切って記述することができます。値の個数によってそれぞれの値が対応する分割線が変わります。
- 2つの場合は1つ目の値が上下、2つ目の値が左右の分割線に適用されます。
- 3つの場合は1つ目の値が上、2つ目の値が左右、3つ目の値が下の分割線に適用されます。
- 4つの場合は1つ目の値が上、2つ目の値が右、3つ目の値が下、4つ目の値が左の分割線に適用されます。
border-image-slice: 〚すべての分割線〛;
border-image-slice: 〚上下〛 〚左右〛;
border-image-slice: 〚上〛 〚左右〛 〚下〛;
border-image-slice: 〚上〛 〚右〛 〚下〛 〚左〛;
分割線によって生成される領域は重なることができます。例えば、画像の端から左右の分割線までの距離の合計が画像の横幅を超える指定も有効です。ただし、この場合上下の辺と中央の領域は透明になります。画像の端から上下の分割線までの距離の合計が画像の高さを超える場合も同様です。
中央の断片の扱い
既定では分割された境界線用画像のうち中央の断片は既定では使用されませんが、“fill”キーワードを記述すると境界線の内側に追加の背景のように描画されます。
border-image-slice: 〚すべての分割線〛 fill;
border-image-slice: 〚上下〛 〚左右〛 fill;
border-image-slice: 〚上〛 〚左右〛 〚下〛 fill;
border-image-slice: 〚上〛 〚右〛 〚下〛 〚左〛 fill;
“fill”の記述位置は自由です。
＃
使用例
＃
＃
“<number>”値で指定する
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 100;
}
border-image-slice: 100;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
}
border-image-slice: 200;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 250;
}
border-image-slice: 250;
＃
“<percentage>”値で指定する
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 10%;
}
border-image-slice: 10%;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 34%;
}
border-image-slice: 34%;
div {
border-style: solid;
border-width: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 40%;
}
border-image-slice: 40%;
＃
＃
分割線の位置を個別に指定する
div {
border-style: solid;
border-width: 20;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-slice: 50 100 150 200;
}
border-image-slice: 50 100 150 200;
div {
border-style: solid;
border-width: 20;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-slice: 100 150 200;
}
border-image-slice: 100 150 200;
div {
border-style: solid;
border-width: 20;
border-image-source: url(border-image_sample.png);
border-image-slice: 200;
border-image-slice: 150 200;
}
border-image-slice: 150 200;
