Properti border-image-outset

Properti border-image-outset memungkinkan untuk menggeser batas ke luar elemen. Sebagai nilai ditentukan angka tanpa satuan atau satuan untuk ukuran apa pun, kecuali persen. Jika ditentukan angka tanpa satuan, maka itu adalah pengali, yang mengalikan nilai properti border-width. Nilai negatif tidak didukung.

Untuk informasi lebih detail mengenai gambar untuk batas lihat properti border-image.

Sintaksis

cssselektor {
  border-image-outset: angka positif;
}

Contoh . Angka

Atur nilai border-image-outset menjadi 3 saat elemen dihover dengan mouse. Dengan demikian, batas akan bergeser sejauh 26px*3 - 3 kali lebih jauh dari 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

Atur nilai border-image-outset menjadi 30px saat elemen dihover dengan mouse. Dengan demikian, batas akan bergeser sejauh 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