Proprietatea border-image

Proprietatea border-image definește o imagine pentru bordură, este o proprietate scurtă pentru proprietățile border-image-source, border-image-slice, border-image-repeat, border-image-width și border-image-outset. Între timp, proprietatea scurtă a apărut în CSS mai devreme decât proprietățile pe care le scurtează și, prin urmare, este acceptată de un număr mai mare de browsere vechi.

Sintaxă

selector {
	border-image: url(calea către imagine) decupaj/grosime/deplasare repetare;
}

Descriere

Imaginea pe care dorim să o aplicăm pentru bordură, trebuie să fie formatată într-un mod special: 4 imagini mini pentru colțuri și 4 imagini pentru laturi. Exemplu de astfel de imagine:

În acest caz, partea centrală este lăsată albă (deoarece nu dorim ca aceasta să se suprapună fundalului elementului). Exemplu de imagine cu partea centrală completată:

Valoarea slice indică browserului, ce părți ale imaginii vor fi utilizate pentru colțuri, iar care pentru laturi (și care parte va fi cea centrală). Pentru colțuri merg 4 părți, pentru laturi merg 4 părți și o parte (centrală) merge pe fundalul elementului (opțional, cuvântul cheie fill).

Imaginea este "tăiată" în bucăți în felul următor: pentru valoarea slice se specifică de la una la patru valori. Să analizăm cu un exemplu. Să presupunem că sunt specificate următoarele valori: 10 20 30 40 (pixelii px nu sunt specificați, acest lucru se datorează faptului că imaginea poate fi atât raster, cât și vectorială). Valorile indică următoarele: 10 taie de sus, 20 taie din dreapta, 30 taie de jos, 40 taie din stânga. Care parte a imaginii va ajunge în colțul din stânga sus? Va fi bucata: 10 de sus, 40 din stânga. În colțul din dreapta sus va intra 10 de sus, 20 din dreapta. Și așa mai departe.

De cele mai multe ori, imaginea este simetrică (ca romburile de mai sus) și trebuie să tăiem bucăți egale pentru colțuri. În acest caz, se specifică o singură valoare, care va seta decalaje egale din toate părțile. Pentru a decupa romburile portocalii, vom specifica slice ca 26 (deoarece rombul portocaliu are dimensiunea 26px pe 26px). Rombele galbene vor cădea pe liniile bordurii și li se va întâmpla următoarele: ele fie se vor întinde pe întregul bloc, fie se vor repeta de-a lungul bordurii (depinde de valoarea repeat):

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

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

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

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

Proprietatea border-image nu permite specificarea grosimii bordurii elementului. Browserul doar întinde imaginea de-a lungul bordurii cu lățimea deja existentă. Prin urmare, aceasta trebuie setată prin proprietatea border.

Utilizatorii de browsere vechi (sau cu imaginile dezactivate) vor vedea o bordură standard, setată prin border, deci are sens să îi oferim acesteia un stil și o culoare adecvate.

Valori

Valoare	Descriere
url(Calea către imagine)	Calea către imagine. Pentru mai multe detalii, consultați `border-image-source`.
decupaj	Indică browserului, ce părți ale imaginii vor fi pentru colțuri, și care pentru laturi (și care parte va fi cea centrală). Valori posibile: de la `1` la `4` numere \| de la `1` la `4` procente. Prin spațiu poate fi setat cuvântul cheie `fill` în plus față de numere sau procente. Pentru mai multe detalii, consultați `border-image-slice`.
grosime	Proprietatea controlează lățimea părții vizibile a cadrului, o scalează. Dacă această valoare este mai mare decât lățimea `border-width`, imaginea cadrului va pătrunde sub conținut. Valori posibile: Unități CSS \| procente \| număr \| `auto`. Pentru mai multe detalii, consultați `border-image-width`.
deplasare	O proprietate interesantă, care permite deplasarea cadrului în afara elementului. Valorile negative nu sunt acceptate. Valori posibile: Unități CSS (cu excepția % (?)) \| număr pozitiv \| auto. Pentru mai multe detalii, consultați `border-image-outset`.
repetare	Specifică modul de repetare a imaginii pe borduri (nu pe colțuri): a placa sau a întinde. Valori posibile: `stretch` \| `repeat` \| `round` \| `space`. Pentru mai multe detalii, consultați `border-image-repeat`.

Valoare implicită: none 100%/1/0 stretch (url(calea către imagine) decupaj/grosime/deplasare repetare).

Exemplu . border-image-repeat: valoarea repeat

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

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

Exemplu . border-image-repeat: valoarea stretch

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

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

Exemplu . border-image-repeat: valoarea round

Acum, în stare normală este setată valoarea repeat, iar la hover - round. Observați că înainte de hover în bordură încap un număr neîntreg de romburi, iar după hover - un număr întreg. Așa funcționează round:

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

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

Exemplu . border-image-repeat: două cuvinte

Valoarea repeat pentru lățime și stretch pentru înălțime:

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

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

Exemplu . Coincidența lățimii imaginii cu lățimea bordurii

Să creștem border-width la hover, în timp ce grosimea border-image o lăsăm la fel. Rombele se vor întinde pe toată bordura:

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

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

Exemplu . border-image-slice

Să luăm o altă imagine, în care bucățile diferite nu sunt egale:

Să specificăm, ce părți din imagine trebuie tăiate - 25% 30% 10% 20%. Funcționează astfel: 25% - decalaj de sus, 30% - decalaj din dreapta, 10% - decalaj de jos, 20% - decalaj din stânga. În esență, cu aceste bucăți tăiem colțurile. Colțul din stânga sus va fi 25% de sus a imaginii și 20% din stânga. Colțul din dreapta sus va fi 25% de sus a imaginii, și 30% din dreapta și așa mai departe.

De asemenea, dacă veți face hover pe bloc, atunci se va activa cuvântul cheie fill, iar partea centrală a imaginii va deveni fundalul blocului nostru:

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

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Exemplu

Să creăm o bordură gradient folosind gradientul liniar:

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

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Exemplu . border-image-width

Să setăm valoarea border-image-width la 2 (imaginea bordurii va deveni de 2 ori mai mare decât bordura în sine) la hover peste element (26/2 - specificat după slash, în timp ce 26 - este valoarea border-image-slice). Observați că bordura în sine nu s-a mărit, dar imaginea bordurii - da, deci aceasta va pătrunde sub text:

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

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

Exemplu . border-image-outset

Să setăm valoarea border-image-outset la 3 la hover peste element. (26/1/2 - specificat după al doilea slash, în timp ce 26 - este valoarea border-image-slice, iar - 1 - border-image-width):

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

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

Vezi și

proprietatea border-image-source,
care stabilește calea către imagine pentru bordură
proprietatea border-image-slice,
care stabilește divizarea imaginii pentru bordură
proprietatea border-image-repeat,
care stabilește repetarea imaginii pentru bordură
proprietatea border-image-width,
care stabilește dimensiunea imaginii pentru bordură
proprietatea border-image-outset,
care stabilește deplasarea imaginii pentru bordură