Vlastnost border-image-outset

Vlastnost border-image-outset umožňuje posunout ohraničení za hranice elementu. Jako hodnota se uvádí číslo bez jednotek měření nebo jakékoli jednotky pro velikosti, kromě procent. Je-li uvedeno číslo bez jednotek, je to násobitel, kterým se vynásobí hodnota vlastnosti border-width. Záporné hodnoty nejsou podporovány.

Pro podrobnější informace o obrázcích pro ohraničení viz vlastnost border-image.

Syntaxe

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

Příklad . Číslo

Nastavme hodnotu border-image-outset na 3 při najetí myší na element. Při tom se ohraničení posune o 26px*3 - 3 krát dále, než je jeho šířka, nastavená 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;
}

Результат:

Příklad . Pixely

Nastavme hodnotu border-image-outset na 30px při najetí myší na element. Při tom se ohraničení posune 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;
}

Результат:

Viz také