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

Хосияти border-image-width васеъии қисмати намоёни каторро идора карда, онро миқёс мекунад. Агар ин қимат аз васеъии border-width калонтар бошад, тасвири катор зери мундариҷа меравад.

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

Синтаксис

cssинтихобкунанда {
  border-image-width: воҳидҳои CSS | фоизҳо | адад | auto;
}

Қиматҳо

Қимати пешфарз: 1.

Мисол . Адад

Қимати border-image-width-ро ба 2 вақте ки курсори муш болои элемент аст, таъин мекунем. Дар ин ҳолат катор андозаи 26px*2 хоҳад дошт - 2 маротиба калонтар аз васеъии он, ки дар border-width муайян шудааст. Катор дар ин ҳолат зери матн (монанд ба замина) меравад:

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

Результат:

Мисол . border-image-repeat-ро ба round иваз мекунем

Дар мисоли қаблӣ дар катор миқдори бутуни алмосчаҳо нахоҳад буд. Инро тавре тағир медиҳем, ки border-image-repeat дар қимати round таъин карда шавад:

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

Результат:

Мисол . Фоизҳо

Қимати border-image-width-ро ба 50% вақте ки курсори муш болои элемент аст, таъин мекунем. Дар ин ҳолат катор андозаи 50% аз андозаи блок хоҳад дошт (яъне ду катор, тарафи рост ва чап, тамоми блокро фаро мегиранд):

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

Результат:

Мисол . Фоизҳо

Қимати border-image-width-ро ба 30% вақте ки курсори муш болои элемент аст, таъин мекунем. Дар ин ҳолат катор андозаи 30% аз андозаи блок хоҳад дошт:

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

Результат:

Мисол . Пикселҳо

Қимати border-image-width-ро ба 50px вақте ки курсори муш болои элемент аст, таъин мекунем:

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

Результат:

Мисол . Қимати auto

Қимати border-image-width-ро ба auto вақте ки курсори муш болои элемент аст, таъин мекунем.

Пеш аз гузаронидани курсор border-image-width қимати 1 дорад (ҳамчун пешфарз). Дар мисол ба таври махсус border-width дар 52px, ва border-image-slice - дар қимати 26 таъин шудааст (таъсири auto фақат дар ҳолате мушоҳида мешавад, ки border-width ба border-image-slice баробар набошад). Аз он ҷое, ки border-image-width қимати 1 дорад, тасвири катор тамоми васеъии border-width-ро ишғол мекунад, яъне то 52px кашонда мешавад. Вақте ки курсор мегузарад қимати border-image-width ба auto муқаррар карда мешавад ва васеъии тасвир ба қимати border-image-slice баробар мешавад, яъне 26px:

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

Результат:

Ҳамчунин бубинед