Border-image-width xususiyati

border-image-width xususiyati chekkaning ko‘rinadigan qismining kengligini boshqaradi, uni masshtablaydi. Agar bu qiymat border-width kengligidan katta bo‘lsa, chekka rasmi kontent ostiga kirib ketadi.

Batafsil ma'lumot uchun border-image xususiyatiga qarang.

Sintaksis

cssselektor {
  border-image-width: CSS birliklar | foizlar | son | auto;
}

Qiymatlar

Standart qiymat: 1.

Misol . Son

border-image-width qiymatini 2 ga element sichqoncha bilan ko‘rsatilganda o‘rnatamiz. Bunda chekka 26px*2 o‘lchamida bo‘ladi - border-width da belgilangan kengligidan 2 marta katta. Chekka bu holda matn ostiga kiradi (fon turida):

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

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

Результат:

Misol . Border-image-repeat ni round ga o‘zgartiramiz

Oldingi misolda sichqoncha bilan ko‘rsatilganda chekka butun sonli rombachalar bo‘lmaydi. Buni border-image-repeat ni round qiymatiga o‘rnatib tuzatamiz:

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

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

Результат:

Misol . Foizlar

border-image-width qiymatini 50% ga element sichqoncha bilan ko‘rsatilganda o‘rnatamiz. Bunda chekka blok o‘lchamining 50% i o‘lchamida bo‘ladi (ya'ni o‘ng va chap chekkalar butun blokni o‘ziga qamrab oladi):

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

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

Результат:

Misol . Foizlar

border-image-width qiymatini 30% ga element sichqoncha bilan ko‘rsatilganda o‘rnatamiz. Bunda chekka blok o‘lchamining 30% i o‘lchamida bo‘ladi:

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

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

Результат:

Misol . Piksellar

border-image-width qiymatini 50px ga element sichqoncha bilan ko‘rsatilganda o‘rnatamiz:

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

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

Результат:

Misol . Auto qiymati

border-image-width qiymatini auto ga element sichqoncha bilan ko‘rsatilganda o‘rnatamiz.

Ko‘rsatishdan oldin border-image-width 1 qiymatiga ega (standart). Misolda maxsus border-width 52px ga o‘rnatilgan, border-image-slice esa 26 qiymatida (auto effekti faqat border-width border-image-slice ga teng bo‘lmaganda kuzatiladi). border-image-width 1 qiymatiga ega bo‘lgani uchun, chekka rasmi border-width ning butun kengligini egallaydi, ya'ni 52px ga cho‘ziladi. Ko‘rsatilganda border-image-width qiymati auto ga o‘rnatiladi va rasm kengligi border-image-slice qiymatiga, ya'ni 26px ga teng bo‘ladi:

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

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

Результат:

Shuningdek qarang