A border-image-outset tulajdonság

A border-image-outset tulajdonság lehetővé teszi a szegély képének az elem határain túli eltolását. Értékként mértékegység nélküli szám vagy bármilyen méretmértékegység ható meg, kivéve százalékot. Ha mértékegység nélküli szám van megadva, akkor az egy szorzó, amellyel a border-width tulajdonság értékei szorozódnak. Negatív értékek nem támogatottak.

A szegényképekkel kapcsolatos részletesebb információkért lásd a border-image tulajdonságot.

Szintaxis

cssszelektor {
  border-image-outset: pozitív szám;
}

Példa . Szám

Állítsuk a border-image-outset értékét 3-ra, amikor az egeret az elem fölé visszük. Ekkor a szegély 26px*3-ra tolódik el - 3-szor messzebbre, mint a border-width tulajdonsággal megadott szélessége:

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élda . Pixelek

Állítsuk a border-image-outset értékét 30px-ra, amikor az egeret az elem fölé visszük. Ekkor a szegély 30px-ra tolódik el:

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;
}

Результат:

Lásd még