Хосияти border-image-outset

Хосияти border-image-outset имкон медиҳад, ки ҳудудро аз ҳудуди унсур берун ҷойгир кунад. Ҳамчун қимат рақам бе зикри воҳиди ченак ё ягон воҳиди барои андозаҳо, ғайр аз фоизҳо, муайян карда мешавад. Агар рақам бе воҳид муайян карда шавад, он гоҳ он зарбкунанда аст, ки ба он андозаи хосияти border-width зарб карда мешавад. Қиматҳои манфӣ дастгирӣ намешаванд.

Барои маълумоти муфассалтар дар бораи тасвирҳо барои ҳудуд хосияти border-image-ро бубинед.

Синтаксис

cssинтихобкунанда {
  border-image-outset: рақами мусбӣ;
}

Намуна . Рақам

Қимати border-image-outset-ро ба 3 дар вақти нишондиҳандаи муш ба унсур муқаррар мекунем. Дар ин ҳолат ҳудуд ба 26px*3 - ба 3 маротиба дуртар аз паҳноии он, ки дар 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;
}

Результат:

Намуна . Пикселҳо

Қимати border-image-outset-ро ба 30px дар вақти нишондиҳандаи муш ба унсур муқаррар мекунем. Дар ин ҳолат ҳудуд ба 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;
}

Результат:

Инчунин бубинед