Sifat border-image-outset

Sifat border-image-outset membolehkan mengalihkan sempadan ke luar elemen. Nilai dinyatakan sebagai nombor tanpa unit pengukuran atau sebarang unit untuk saiz, kecuali peratusan. Jika nombor tanpa unit dinyatakan, ia merupakan pengganda yang mendarabkan nilai sifat border-width. Nilai negatif tidak disokong.

Untuk maklumat lebih terperinci mengenai imej untuk sempadan, lihat sifat border-image.

Sintaks

cssselector {
  border-image-outset: nombor positif;
}

Contoh . Nombor

Mari tetapkan nilai border-image-outset kepada 3 apabila tetikus melayang di atas elemen. Pada masa yang sama, sempadan akan beralih sebanyak 26px*3 - 3 kali lebih jauh daripada lebarnya, yang ditetapkan dalam border-width:

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

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

Результат:

Contoh . Piksel

Mari tetapkan nilai border-image-outset kepada 30px apabila tetikus melayang di atas elemen. Pada masa yang sama, sempadan akan beralih sebanyak 30px:

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

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

Результат:

Lihat juga