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ă