Border-image-outset xususiyati

border-image-outset xususiyati chekkani element chegarasidan tashqariga siljitish imkonini beradi. Qiymat sifatida o'lchov birliklarisiz ko'rsatilgan raqam yoki foizlardan tashqari har qanday o'lchamlar uchun birliklar ko'rsatilishi mumkin. Agar birliksiz raqam ko'rsatilgan bo'lsa, u border-width xususiyatining qiymatlariga ko'paytiriladigan ko'paytuvchi hisoblanadi. Salbiy qiymatlar qo'llab-quvvatlanmaydi.

Chekka tasvirlari haqida batafsil ma'lumot uchun border-image xususiyatiga qarang.

Sintaksis

cssselector {
  border-image-outset: musbat raqam;
}

Misol . Raqam

border-image-outset qiymatini 3 ga sozlaymiz, elementga sichqoncha olib borilganda. Bunda chekka 26px*3 ga siljiydi - 3 marta uzoqroqqa, uning border-width da belgilangan kengligiga nisbatan:

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

Результат:

Misol . Piksel

border-image-outset qiymatini 30px ga sozlaymiz, elementga sichqoncha olib borilganda. Bunda chekka 30px ga siljiydi:

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

Результат:

Shuningdek qarang