Lastnost border-image-outset

Lastnost border-image-outset omogoča premik obrobe zunaj meja elementa. Kot vrednost je navedena številka brez navedbe merskih enot ali katere koli merske enote za velikosti, razen odstotkov. Če je navedena številka brez enot, potem je to množitelj, s katerim se pomnožijo vrednosti lastnosti border-width. Negativne vrednosti niso podprte.

Za podrobnejše informacije o slikah za obrobe glejte lastnost border-image.

Sintaksa

cssselektor {
  border-image-outset: pozitivno število;
}

Primer . Število

Nastavimo vrednost border-image-outset na 3 ob preletu miške preko elementa. Pri tem se bo obrobje premaknilo za 26px*3 - 3 krat dlje, kot je njena širina, določena 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;
}

Результат:

Primer . Piksli

Nastavimo vrednost border-image-outset na 30px ob preletu miške preko elementa. Pri tem se bo obrobje premaknilo za 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;
}

Результат:

Glejte tudi