CSS border-image-slice egenskab

Definition og brug

border-image-slice egenskaben definerer den indre afstand for billedkanten.

Se også:

CSS3 vejledning:CSS3 kanter

Eksempel

Definerer den indre afstand for billedkanten:

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

CSS syntaks

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

Kommentar:Denne egenskab definerer den indre afstand for billedets øvre, højre, nedre og venstre kanter, billedet deles op i ni områder: fire hjørner, fire kanter og et midterområde. Hvis fill-nøgleordet ikke bruges, vil det midterste billedeområde blive kastet væk. Hvis den fjerde værdi/procentsatsen udelades, er den samme som den anden værdi. Hvis den tredje værdi udelades, er den samme som den første værdi. Hvis den anden værdi udelades, er den samme som den første værdi.

Egenskabsværdi

Værdi Beskrivelse
number Numerisk værdi, der repræsenterer pixels i billedet (hvis det er et rasterbillede) eller vektorkoordinater (hvis det er et vektorbillede).
% Procentværdi i forhold til billedets størrelse: billedets bredde påvirker den horisontale afstand, højden påvirker den vertikale afstand.
fill Bevarer midterdelen af kantbilledet.

Tekniske detaljer

Standardværdi: 100%
Arv: nej
Version: CSS3
JavaScript syntaks: object.style.borderImageSlice="50% 50%"

browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter egenskaben.

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

se venligst border-image egenskab.