Свойство 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,
което задава размер на изображението за границата