このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

border-image-slice”プロパティ:境界線用画像の分割CSS3で追加

記事Apr. 23rd,2021
境界線用画像の分割方法を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 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”の記述位置は自由です。

仕様書

定義されている仕様書
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
border-image-slice
定義なし

定義なし

定義あり

使用例

境界線用画像のサンプル

表示例では以下の画像を境界線として使用しています。

境界線用画像のサンプル
サンプル画像の寸法

<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: 20px;
border-image-source: url(border-image_sample.png);
border-image-slice: 200 fill;
}
border-image-slice: 200 fill;

分割線の位置を個別に指定する

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;
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク