Свойство border-image-outset

Свойство border-image-outset элементнинг чекларидан ташкарига чегарани суриб чиқиш имконини беради. Қиймат сифатида ўлчов бирликларисиз сон ёки ҳар қандай ўлчамлар учун бирликлар, фоизлардан ташқари, кўрсатилиши мумкин. Агар ўлчов бирликларисиз сон кўрсатилган бўлса, у border-width свойствининг қийматларига кўпайтириладиган кўпайтгувчи сифатида қаралади. Салбий қийматлар қувватланмайди.

Чегара учун расмлар ҳақида батафсил маълумот учун border-image свисига қаранг.

Синтаксис

cssселектор {
  border-image-outset: мусбат сон;
}

Мисол . Сон

Элементга sichqoncha олиб борилганда border-image-outset свисининг қийматини 3 қиламиз. Бунда чегара 26px*3 га - унинг border-width ида белгиланган энидан 3 марта нарсга сурилади:

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

Результат:

Мисол . Пикселлар

Элементга sichqoncha олиб борилганда 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;
}

Результат:

Шунингдек қаранг