CSS border-image eigenschap
Voorbeeld
Specificeer een afbeelding als de rand rond een element:
#borderimg {
border-image: url(border.png) 30 round;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
Met de border-image
eigenschap kunt u een afbeelding specificeren die moet worden gebruikt als de rand rond een element.
De eigenschap border-image is een verkorte eigenschap voor:
- border-image-source
- border-image-slice
- grens-beeld-breedte
- border-image-begin
- grens-afbeelding-herhalen
Weggelaten waarden worden ingesteld op hun standaardwaarden.
Standaardwaarde: | geen 100% 1 0 uitrekken |
---|---|
geërfd: | Nee |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS3 |
JavaScript-syntaxis: | object .style.borderImage="url(border.png) 30 rond" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Getallen gevolgd door -webkit-, -moz- of -o- specificeren de eerste versie die met een prefix werkte.
Property | |||||
---|---|---|---|---|---|
border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
Opmerking: zie de individuele browserondersteuning voor elke waarde hieronder.
CSS-syntaxis
border-image: source slice width outset repeat|initial|inherit;
Eigendomswaarden
Value | Description | Play it |
---|---|---|
border-image-source | The path to the image to be used as a border | |
border-image-slice | How to slice the border image | |
border-image-width | The width of the border image | |
border-image-outset | The amount by which the border image area extends beyond the border box | |
border-image-repeat | Whether the border image should be repeated, rounded or stretched | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelden
Voorbeeld
Verschillende segmentwaarden veranderen het uiterlijk van de rand volledig:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-randafbeeldingen
CSS-referentie: eigenschap border-image-outset
CSS-referentie: eigenschap border-image-repeat
CSS-referentie: eigenschap border-image-slice
CSS-referentie: eigenschap border-image-source
CSS-referentie: eigenschap border-image-width
HTML DOM-referentie: eigenschap borderImage