Eigenschap border-image-slice
De eigenschap border-image-slice geeft
de browser aan welke delen van de afbeelding voor de
hoeken gebruikt worden, en welke voor de zijden (en welk deel
het centrale deel zal zijn). Voor de hoeken gaan 4
delen, voor de zijden gaan 4 delen en één
deel (het centrale) gaat naar de achtergrond van het element
(optioneel, sleutelwoord fill).
Voor meer gedetailleerde informatie zie de eigenschap
border-image.
Syntaxis
1e tot 4e getal | van 1e tot 4e percentage;
}
<-css->
Bij de getallen en percentages kan, gescheiden door een spatie,
het sleutelwoord fill staan.
Waarden
| Waarde | Beschrijving |
|---|---|
| percentages | Percentages worden berekend ten opzichte van de grootte van de afbeelding. Horizontale afmetingen ten opzichte van de breedte, verticale — ten opzichte van de hoogte. |
| getallen | Getallen zijn pixels (voor rasterafbeeldingen) of coördinaten (voor vectorafbeeldingen). Meeteenheden worden niet gespecificeerd. |
fill |
Standaardgedrag veronderstelt dat het centrale deel
van de afbeelding wordt weggegooid. Om dit te gebruiken,
moet het sleutelwoord fill worden gebruikt, in aanvulling
op de getallen of percentages.
|
Aantal parameters
De offset kan 1, 2,
3 of 4 parameters aannemen. Let
op dat er geen meeteenheden voor de
offset worden geschreven (bijvoorbeeld alleen 20,
en niet 20px). De dikte kan ook worden ingesteld in %.
| Aantal parameters | Beschrijving |
|---|---|
1 |
Dikte voor alle zijden tegelijk. |
2 |
1 2; - 1px voor boven en onder, 2px voor links en rechts. |
3 |
1 2 3; - 1px voor boven, 2px voor links en rechts, 3px voor onder. |
4 |
1 2 3 4; - 1px voor boven, 2px voor rechts, 3px voor onder, 4px voor links. |
Standaardwaarde: 100%(?).
Voorbeeld
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Voorbeeld
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: repeat;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Zie ook
-
de eigenschap
border-image,
dat een verkorte vorm is voor rand-afbeelding -
de eigenschap
border-image-source,
dat het pad naar de afbeelding voor de rand specificeert -
de eigenschap
border-image-repeat,
dat de herhaling van de afbeelding voor de rand specificeert -
de eigenschap
border-image-width,
dat de grootte van de afbeelding voor de rand specificeert -
de eigenschap
border-image-outset,
dat de verschuiving van de afbeelding voor de rand specificeert
