border-image-width касиети

border-image-width касиети чектин көрүнгөн бөлүгүнүн туурасын башкарат, аны масштабдайт. Эгер бул маани border-width туурасынан чоң болсо, чектин сүрөтү мазмун астына кирип кетет.

Толугураак маалымат үчүн border-image касиетине караңыз.

Синтаксис

cssтандоочу {
  border-image-width: CSS бирдиктери | пайыздар | сан | auto;
}

Маанилер

Демейки маани: 1.

Мисал . Сан

Элементке чычканды апарганда border-image-width маанисин 2 кылалы. Бул учурда чектин өлчөмү 26px*2 - border-width менен белгиленген туурасынан 2 эсе чоң болот. Чек ушул учурда тексттин астына кирет (фондой эле):

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

Результат:

Ошондой эле караңыз