Proprietatea border-image-width

Proprietatea border-image-width controlează lățimea părții vizibile a bordurii, o scalează. Dacă această valoare este mai mare decât lățimea border-width, imaginea bordurii va pătrunde sub conținut.

Pentru informații mai detaliate, consultați proprietatea border-image.

Sintaxă

selector {
	border-image-width: unități CSS | procente | număr | auto;
}

Valori

Valoare	Descriere
Unități CSS	Valoare în unitățile CSS specificate.
Procente	Valori în procente relative la dimensiunea blocului căruia i se setează bordura.
Număr	Valoare numerică cu care se înmulțește `border-width`.
`auto`	Cuvânt cheie. Dacă este setat, valoarea este egală cu `border-image-slice` corespunzător. Dacă nu există o dimensiune potrivită, se utilizează valoarea `border-width`, iar imaginea umple întregul colț al bordurii, pătrunzând sub conținut. Consultați exemplele pentru o mai bună înțelegere.

Valoare implicită: 1.

Exemplu . Număr

Să setăm valoarea border-image-width la 2 la trecerea mouse- peste element. În acest caz, bordura va avea dimensiunea de 26px*2 - de 2 ori mai mare decât lățimea sa setată în border-width. Bordura va pătrunde sub text (ca un fundal):

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Exemplu . Să schimbăm border-image-repeat în round

În exemplul anterior, la trecerea mouse-ului, în bordură va fi un număr neîntreg de romburi. Să corectăm acest lucru, setând border-image-repeat la valoarea round:

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: round;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Exemplu . Procente

Să setăm valoarea border-image-width la 50% la trecerea mouse- peste element. În acest caz, bordura va avea dimensiunea de 50% din dimensiunea blocului (adică cele două borduri, dreapta și stânga, vor acoperi întregul bloc):

<div id="elem"></div>

#elem:hover {
	border-image-width: 50%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Exemplu . Procente

Să setăm valoarea border-image-width la 30% la trecerea mouse- peste element. În acest caz, bordura va avea dimensiunea de 30% din dimensiunea blocului:

<div id="elem"></div>

#elem:hover {
	border-image-width: 30%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Exemplu . Pixeli

Să setăm valoarea border-image-width la 50px la trecerea mouse- peste element:

<div id="elem"></div>

#elem:hover {
	border-image-width: 50px;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Exemplu . Valoarea auto

Să setăm valoarea border-image-width la auto la trecerea mouse- peste element.

Înainte de trecerea mouse-ului, border-image-width are valoarea 1 (implicită). În exemplu, în mod special border-width este setată la 52px, iar border-image-slice - la valoarea 26 (efectul cu auto se va observa doar dacă border-width nu este egal cu border-image-slice). Datorită faptului că border-image-width are valoarea 1, imaginea bordurii va ocupa întreaga lățime a border-width, adică se va întinde pe 52px. La trecerea mouse-ului valoarea border-image-width se va seta la auto și lățimea imaginii va deveni egală cu valoarea border-image-slice, adică 26px:

<div id="elem"></div>

#elem:hover {
	border-image-width: auto;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 52px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Vezi ș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 este secționarea imaginii pentru bordură
proprietatea border-image-repeat,
care este repetarea imaginii pentru bordură
proprietatea border-image-outset,
care stabilește decalajul imaginii pentru bordură