Border-image-slice касиети

border-image-slice касиети браузерге, сүрөттүн кайсы бөлүктөрү бурчтарга, кайсылары жакаларга баруусун (жана ортоңку бөлүгү элементтин фонуна бараарын) көрсөтөт. Бурчтарга 4 бөлүк, жакаларга 4 бөлүк жана бир бөлүк (ортоңку) элементтин фонуна барат (милдеттүү эмес, fill ачкыч сөзү).

Кененирээк маалымат үчүн border-image касиетине караңыз.

Синтаксис

<+css+> тандоочусу { border-image-slice: 1-ден 4-кө чейинки сандар | 1-ден 4-кө чейинки пайыздар; } <-css->

Сандар менен пайыздар менен бирге боштук менен бөлүнгөн fill ачкыч сөзү турушу мүмкүн.

Маанилер

Маани	Сүрөттөө
пайыздар	Пайыздар сүрөттүн өлчөмүнө салыштырмалуу эсептелет. Горизонталдыктар туурасына, тиктер — бийиктигине салыштырмалуу.
сандар	Сандар - бул пикселдер (растрдык сүрөт үчүн) же координаттар (вектордук үчүн). Өлчөө бирдиктери көрсөтүлбөйт.
`fill`	Демейки жүрүм-турум ортоңку бөлүгүн төгөрөктөн чыгарылаарын камтыйт. Аны колдонуу үчүн, сандар же пайыздар менен бирге `fill` ачкыч сөзүн колдонуу керек.

Параметрлердин саны

Жылыштыруу 1, 2, 3 же 4 параметр кабыл ала алат. Өлчөө бирдиктеринин жазылбаарына көңүл буруңуз (мисалы, жөн эле 20, 20px эмес). Ошондой эле калыңдыкты % менен көрсөтүүгө болот.

Параметрлердин саны	Сүрөттөө
`1`	Бардык жаактар үчүн бир эле калыңдык.
`2`	1 2; - үстү жана түбү үчүн `1px`, сол жана он үчүн `2px`.
`3`	`1 2 3`; - үстү үчүн `1px`, сол жана он үчүн `2px`, түбү үчүн `3px`.
`4`	`1 2 3 4`; - үстү үчүн `1px`, он үчүн `2px`, түбү үчүн `3px`, сол үчүн `4px`.

Демейки маани: 100%(?).

Мисал

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

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

Результат:

Мисал

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

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

Результат:

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

border-image касиети,
чек ара-сүрөтү үчүн кыскартылган түрү
border-image-source касиети,
чек ара үчүн сүрөттүн жолун белгилейт
border-image-repeat касиети,
чек ара үчүн сүрөттүн кайталанышын белгилейт
border-image-width касиети,
чек ара үчүн сүрөттүн өлчөмүн белгилейт
border-image-outset касиети,
чек ара үчүн сүрөттүн жылышын белгилейт