Vlastnosť border-image-outset

Vlastnosť border-image-outset umožňuje posunúť rámček za hranice elementu. Ako hodnota sa uvádza číslo bez uvedenia merných jednotiek alebo akékoľvek jednotky pre veľkosti, okrem percent. Ak je uvedené číslo bez jednotiek, potom je to multiplikátor, ktorým sa násobí hodnoty vlastnosti border-width. Záporné hodnoty nie sú podporované.

Pre podrobnejšie informácie o obrázkoch pre okraj pozri vlastnosť border-image.

Syntax

cssselektor {
  border-image-outset: kladné číslo;
}

Príklad . Číslo

Nastavme hodnotu border-image-outset na 3 pri prejdení myšou nad element. V tom prípade sa okraj posunie o 26px*3 - 3 krát ďalej, ako je jej šírka, zadaná v 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;
}

Результат:

Príklad . Pixely

Nastavme hodnotu border-image-outset na 30px pri prejdení myšou nad element. V tom prípade sa okraj posunie o 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;
}

Результат:

Pozri tiež