Proprietatea border-image-outset
Proprietatea border-image-outset permite
deplasarea bordurii în afara elementului. Ca
valoare se specifică un număr fără a indica unități
de măsură sau orice unitate
pentru dimensiuni, cu excepția procentelor. Dacă este specificat
un număr fără unități, atunci acesta este un multiplicator,
cu care se înmulțește valoarea proprietății border-width.
Valorile negative nu sunt acceptate.
Pentru informații mai detaliate despre imaginile
pentru bordură, consultați proprietatea border-image.
Sintaxă
selector {
border-image-outset: număr pozitiv;
}
Exemplu . Număr
Să setăm valoarea border-image-outset
la 3 la trecerea mouse-ului peste element.
În acest caz, bordura se va deplasa la 26px*3 - de
3 ori mai departe decât lățimea sa, stabilită
în 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;
}
:
Exemplu . Pixeli
Să setăm valoarea border-image-outset
la 30px la trecerea mouse-ului peste element.
În acest caz, bordura se va deplasa la 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;
}
:
Veți și
-
proprietatea
border-image,
care este o prescurtare pentru bordura-imagine -
proprietatea
border-image-source,
care stabilește calea către imagine pentru bordură -
proprietatea
border-image-slice,
care realizează divizarea imaginii pentru bordură -
proprietatea
border-image-repeat,
care repetă imaginea pentru bordură -
proprietatea
border-image-width,
care stabilește dimensiunea imaginii pentru bordură