Eigenschaft border-image-outset
Die Eigenschaft border-image-outset erlaubt es,
den Rahmen über die Grenzen des Elements hinaus zu verschieben. Als
Wert wird eine Zahl ohne Angabe von Maßeinheiten
oder beliebige Einheiten
für Größen angegeben, außer Prozent. Wenn eine
Zahl ohne Einheiten angegeben ist, dann ist sie ein Multiplikator,
mit dem die Werte der Eigenschaft border-width multipliziert werden.
Negative Werte werden nicht unterstützt.
Für detailliertere Informationen zu Bildern
für Rahmen siehe die Eigenschaft border-image.
Syntax
Selektor {
border-image-outset: positive Zahl;
}
Beispiel . Zahl
Setzen wir den Wert von border-image-outset
auf 3 beim Überfahren des Elements mit der Maus.
Dabei verschiebt sich der Rahmen um 26px*3 -
um das 3-fache weiter als seine Breite, die
in border-width festgelegt ist:
<div id="elem"></div>
#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;
}
:
Beispiel . Pixel
Setzen wir den Wert von border-image-outset
auf 30px beim Überfahren des Elements mit der Maus.
Dabei verschiebt sich der Rahmen um 30px:
<div id="elem"></div>
#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;
}
:
Siehe auch
-
die Eigenschaft
border-image,
die eine Kurzschreibweise für den Bild-Rahmen ist -
die Eigenschaft
border-image-source,
die den Pfad zum Bild für den Rahmen festlegt -
die Eigenschaft
border-image-slice,
die die Aufteilung des Bildes für den Rahmen festlegt -
die Eigenschaft
border-image-repeat,
die die Wiederholung des Bildes für den Rahmen festlegt -
die Eigenschaft
border-image-width,
die die Größe des Bildes für den Rahmen festlegt
