Border-image-slice касиети
border-image-slice касиети
браузерге, сүрөттүн кайсы бөлүктөрү
бурчтарга, кайсылары жакаларга баруусун (жана ортоңку бөлүгү
элементтин фонуна бараарын) көрсөтөт. Бурчтарга 4
бөлүк, жакаларга 4 бөлүк жана бир
бөлүк (ортоңку) элементтин фонуна барат
(милдеттүү эмес, fill ачкыч сөзү).
Кененирээк маалымат үчүн
border-image касиетине караңыз.
Синтаксис
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%(?).
Мисал
<div id="elem"></div>
#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;
}
:
Мисал
<div id="elem"></div>
#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касиети,
чек ара үчүн сүрөттүн жылышын белгилейт