プロパティ border-image-repeat

プロパティ border-image-repeat は、 画像としてのボーダーの内側部分の繰り返し方法を 指定します。詳細な情報については、 プロパティ border-image を参照してください。

構文

cssセレクタ {
  border-image-repeat: stretch | repeat | round;
}

値

デフォルト値: stretch。

パラメータの数

1 または 2 のパラメータを取ることができます。 2つのパラメータが指定された場合、最初のパラメータは 上辺と下辺に、2番目のパラメータは左辺と右辺に適用されます。

例 . stretch の値

html<div id="elem"></div>

css#elem {
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: stretch;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

例 . repeat の値

html<div id="elem"></div>

css#elem {
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: repeat;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

例 . round の値

現在、通常状態では repeat の値が設定されており、ホバー時には round が設定されています。ホバー前は ボーダーに菱形が整数個収まっていませんが、 ホバー後は整数個収まっていることに注意してください。これが round の動作です：

html<div id="elem"></div>

css#elem:hover {
  border-image-repeat: round;
}
#elem {
  border-style: solid;
  border-width: 42px;
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-image-repeat: repeat;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

例 . 2つのキーワード

幅には repeat、 高さには stretch の値：

html<div id="elem"></div>

css#elem {
  border-image-repeat: repeat stretch;
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

関連項目