Sifat border-image-repeat

Sifat border-image-repeat menetapkan cara pengulangan bahagian dalam sempadan dalam bentuk gambar. Untuk maklumat yang lebih terperinci rujuk sifat border-image.

Sintaks

cssselector {
  border-image-repeat: stretch | repeat | round;
}

Nilai

Nilai lalai: stretch.

Bilangan Parameter

Boleh menerima 1 atau 2 parameter. Jika dua parameter diberikan, maka yang pertama adalah untuk sempadan atas dan bawah, dan parameter kedua - untuk kiri dan kanan.

Contoh . Nilai 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;
}

Результат:

Contoh . Nilai 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;
}

Результат:

Contoh . Nilai round

Sekarang dalam keadaan normal ditetapkan nilai repeat, dan ketika hover - round. Perhatikan bahawa sebelum hover ke dalam sempadan dimasukkan bukan integer bilangan rombus, dan selepas hover - integer. Begitulah cara round berfungsi:

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;
}

Результат:

Contoh . Dua perkataan

Nilai repeat untuk lebar dan stretch untuk tinggi:

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;
}

Результат:

Lihat juga