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ă

cssselector {
  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:

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

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

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

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