Eigenschap border-image-outset
De eigenschap border-image-outset maakt het mogelijk
de rand buiten het element te plaatsen. Als
waarde wordt een getal zonder meeteenheid
opgegeven of een willekeurige meeteenheid
voor afmetingen, met uitzondering van percentages. Als een
getal zonder eenheid is opgegeven, is het een vermenigvuldiger
waarmee de waarde van de eigenschap border-width wordt vermenigvuldigd.
Negatieve waarden worden niet ondersteund.
Voor meer gedetailleerde informatie over afbeeldingen
voor randen, zie de eigenschap border-image.
Syntaxis
selector {
border-image-outset: positief getal;
}
Voorbeeld . Getal
Stel de waarde van border-image-outset
in op 3 bij het zweven met de muis over het element.
Hierdoor verschuift de rand met 26px*3 -
3 keer verder dan de breedte die is ingesteld
met border-width:
<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;
}
:
Voorbeeld . Pixels
Stel de waarde van border-image-outset
in op 30px bij het zweven met de muis over het element.
Hierdoor verschuift de rand met 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;
}
:
Zie ook
-
de eigenschap
border-image,
dat een korte notatie is voor een randafbeelding -
de eigenschap
border-image-source,
dat het pad naar de afbeelding voor de rand instelt -
de eigenschap
border-image-slice,
dat de opdeling van de afbeelding voor de rand instelt -
de eigenschap
border-image-repeat,
dat de herhaling van de afbeelding voor de rand instelt -
de eigenschap
border-image-width,
dat de grootte van de afbeelding voor de rand instelt