CSS border-image-slice eigenschap
Voorbeeld
Geef op hoe de randafbeelding moet worden gesneden:
#borderimg {
border-image-slice: 30%;
}
Definitie en gebruik
De border-image-slice
eigenschap geeft aan hoe de afbeelding moet worden gesegmenteerd die is opgegeven door
border-image-source . Het beeld wordt altijd in negen secties gesneden: vier hoeken, vier randen en het midden.
Het "middelste" gedeelte wordt als volledig transparant beschouwd, tenzij het opvulsleutelwoord is ingesteld.
Tip: Kijk ook naar de border-image eigenschap (een verkorte eigenschap voor het instellen van alle border-image-* eigenschappen).
Standaardwaarde: | 100% |
---|---|
geërfd: | Nee |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS3 |
JavaScript-syntaxis: | object .style.borderImageSlice="30%" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSS-syntaxis
border-image-slice: number|%|fill|initial|inherit;
Opmerking: de border-image-slice
eigenschap kan één tot vier waarden aannemen. Als de vierde waarde wordt weggelaten, is deze gelijk aan de tweede. Als de derde ook wordt weggelaten, is deze hetzelfde als de eerste. Als de tweede ook wordt weggelaten, is deze hetzelfde als de eerste.
Eigendomswaarden
Value | Description | Play it |
---|---|---|
number | The number(s) represent pixels for raster images or coordinates for vector images | |
% | Percentages are relative to the height or width of the image | |
fill | Causes the middle part of the image to be displayed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Gerelateerde pagina's
CSS-zelfstudie: CSS-randafbeeldingen
CSS-referentie: eigenschap border-image
CSS-referentie: eigenschap border-image-outset
CSS-referentie: eigenschap border-image-repeat
CSS-referentie: eigenschap border-image-source
CSS-referentie: eigenschap border-image-width
HTML DOM-referentie: borderImageSlice-eigenschap