Sifat border-image-width

Sifat border-image-width mengawal lebar bahagian sempadan yang kelihatan, menskalakan nya. Jika nilai ini lebih besar daripada lebar border-width, imej sempadan akan merayap di bawah kandungan.

Untuk maklumat lebih terperinci lihat sifat border-image.

Sintaks

csspemilih {
  border-image-width: unit CSS | peratus | nombor | auto;
}

Nilai

Nilai lalai: 1.

Contoh . Nombor

Mari tetapkan nilai border-image-width kepada 2 apabila penunjuk tetikus melayang di atas elemen. Pada masa ini sempadan akan menjadi bersaiz 26px*2 - 2 kali ganda lebih besar daripada lebarnya, yang ditetapkan dalam border-width. Sempadan pada masa ini akan merayap di bawah teks (seperti latar belakang):

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

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

Результат:

Contoh . Mari ubah border-image-repeat kepada round

Dalam contoh sebelumnya, apabila melayang, dalam sempadan akan ada bilangan rombus yang tidak bulat. Mari betulkan ini dengan menetapkan border-image-repeat kepada nilai round:

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

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

Результат:

Contoh . Peratus

Mari tetapkan nilai border-image-width kepada 50% apabila penunjuk tetikus melayang di atas elemen. Pada masa ini sempadan akan menjadi bersaiz 50% daripada saiz blok (iaitu dua sempadan, kanan dan kiri, akan menutupi keseluruhan blok):

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

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

Результат:

Contoh . Peratus

Mari tetapkan nilai border-image-width kepada 30% apabila penunjuk tetikus melayang di atas elemen. Pada masa ini sempadan akan menjadi bersaiz 30% daripada saiz blok:

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

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

Результат:

Contoh . Piksel

Mari tetapkan nilai border-image-width kepada 50px apabila penunjuk tetikus melayang di atas elemen:

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

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

Результат:

Contoh . Nilai auto

Mari tetapkan nilai border-image-width kepada auto apabila penunjuk tetikus melayang di atas elemen.

Sebelum melayang border-image-width mempunyai nilai 1 (lalai). Dalam contoh secara khusus border-width ditetapkan kepada 52px, dan border-image-slice - kepada nilai 26 (kesan dengan auto akan diperhatikan hanya jika border-width tidak sama dengan border-image-slice). Oleh kerana border-image-width mempunyai nilai 1, imej sempadan akan mengambil seluruh lebar border-width, iaitu akan meregang hingga 52px. Apabila melayang nilai border-image-width akan ditetapkan kepada auto dan lebar imej akan menjadi sama dengan nilai border-image-slice, iaitu 26px:

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

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

Результат:

Lihat juga