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ă

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

Valori

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):

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

css#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:

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

css#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):

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

css#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:

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

css#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:

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

css#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:

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

css#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