CSS border-afbeelding-scheiding eigenschap

Definitie en gebruik

De border-image-slice eigenschap specificeert de binnendoorwaaiing van de afbeeldingsrand.

Zie ook:

CSS3 handleiding:CSS3 rand

Voorbeeld

Specificeert de binnendoorwaaiing van de afbeeldingsrand:

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

CSS syntaxis

border-image-slice: number|%|fill;

Opmerking:Deze eigenschap specificeert de binnendoorwaaiing van de bovenste, rechter, onderste en linkerkant van het beeld, het beeld wordt in negen secties gesneden: vier hoeken, vier kanten en een middensectie. tenzij het woord fill wordt gebruikt, wordt het midden van het beeld weggelaten. Als de vierde waarde/percentage wordt weggelaten, is het hetzelfde als de tweede waarde. Als de derde waarde wordt weggelaten, is het hetzelfde als de eerste waarde. Als de tweede waarde wordt weggelaten, is het hetzelfde als de eerste waarde.

Eigenschapswaarde

Waarde Beschrijving
number Numerieke waarde, die de pixels vertegenwoordigt in het beeld (als het een rasterbeeld is) of矢量坐标（如果它是矢量图像）。
% Aantal procenten ten opzichte van de afbeeldingsgrootte: de breedte beïnvloedt de horizontale afwijking, de hoogte de verticale afwijking.
fill Behoudt het midden van de randafbeelding.

Technische details

Standaardwaarde: 100%
Inheritance: nee
Versie: CSS3
JavaScript syntaxis: object.style.borderImageSlice="50% 50%"

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

Raadpleeg border-image eigenschappen.