Својство border-image-outset
Својството border-image-outset овозможува
границата да се помести надвор од елементот. Како
вредност се наведува број без наведување на мерни единици
или било кои единици
за димензии, освен проценти. Ако е наведен
број без единици, тогаш тој е множител,
со кој се множат вредностите на својството border-width.
Негативни вредности не се поддржуваат.
За повеќе детални информации за сликите
за границата погледнете го својството border-image.
Синтакса
селектор {
border-image-outset: позитивен број;
}
Пример . Број
Да ја поставиме вредноста border-image-outset
на 3 при посета со глушецот на елементот.
При тоа границата ќе се помести за 26px*3 -
3 пати подалеку од нејзината ширина, зададена
во border-width:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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;
}
:
Погледнете ги исто така
-
својството
border-image,
кое е кратенка за граница-слика -
својството
border-image-source,
кое го задава патот до сликата за границата -
својството
border-image-slice,
кое сечење на сликата за границата -
својството
border-image-repeat,
кое повторување на сликата за границата -
својството
border-image-width,
кое ја задава големината на сликата за границата