Својство border-image-slice
Својство border-image-slice одређује
прегледачу, који делови слике ће се користити за
углове, а који за стране (и који део
ће бити централни). За углове се користе 4
дела, за стране се користе 4 дела и један
део (централни) се користи за позадину елемента
(опционо, кључна реч fill).
За детаљније информације погледајте својство
border-image.
Синтакса
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%(?).
Пример
<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,
које одређује помак слике за ивицу