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

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

Чек аранын сүрөттөрү жөнүндө кененирээк маалымат алуу үчүн border-image касиетине караңыз.

Синтаксис

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

Мисал . Сан

border-image-outset касиетинин маанисин 3 кылып, элементтин үстүнө чычканды алып келгенде орнотолу. Бул учурда чек ара 26px*3 - 3 эсе алыстайт, ал эми анын туурасы border-width аркылуу берилген:

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

Результат:

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

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

Результат:

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