border-image

border-imageプロパティは、ボーダー画像をまとめて指定するショートハンドである。

.border-box {
  border: 21px solid #76D647;
  border-image: url(../img/share/stripe.png) 21 21 round;
}

/* 上記のショートハンドと同様の記述 */
.strong-box {
  border: 21px solid #76D647;
  border-image-source: url(../img/share/stripe.png);
  border-image-slice: 21;
  border-image-width: auto;
  border-image-outset: 21px;
  border-image-repeat: round;
}
  • border-image-source：ボーダーに利用する画像を指定する。
  • border-image-slice：画像の使用範囲を指定する。数値が1つの場合は上下左右、4つの場合は順に上・右・下・左、2つの場合は上下・左右、3つの場合は上・左右・下の端から内側へのオフセット量を表す。
  • border-image-width：画像ボーダーの太さを指定する。
  • border-image-outset：ボーダー画像の領域を広げるサイズを指定する。
  • border-image-repeat：ボーダー画像の繰り返しを指定する。

border-image-repeatプロパティ

画像の繰り返し方法を指定する。値が1つの場合は全て同じ方法が適用される。2つ指定した場合は1つ目が上下、2つ目が左右、または中央部分の繰り返し方法が適用される。

  • stretch：領域全体を覆うように画像を引き延ばす（初期値）。
  • repeat：画像を繰り返して表示する。
  • round：画像を繰り返して表示する。画像がぴったり収まらない時はそれぞれの画像サイズを調整して、最後の画像が途切れないようにする。
  • space：画像を繰り返して表示する。画像がぴったり収まらない時は繰り返しの画像の間に余白を設けて調整する。
inserted by FC2 system