Egenskapen border-image-slice

Egenskapen border-image-slice forteller nettleseren hvilke deler av bildet som skal gå til hjørnene, og hvilke som skal gå til sidene (og hvilken del som skal være sentral). Til hjørnene går 4 deler, til sidene går 4 deler og én del (den sentrale) går til bakgrunnen til elementet (valgfritt, nøkkelordet fill).

For mer detaljert informasjon, se egenskapen border-image.

Syntaks

<+css+> velger { border-image-slice: fra 1. til 4. tall | fra 1. til 4. prosenter; } <-css->

Med tall og prosenter mellomrom kan nøkkelordet fill stå.

Verdier

Verdi	Beskrivelse
prosenter	Prosent beregnes i forhold til størrelsen på bildet. Horisontale i forhold til bredden, vertikale — i forhold til høyden.
tall	Tall er piksler (for rasterbilde) eller koordinater (for vektorbilde). Måleenheter angis ikke.
`fill`	Standardatferden forutsetter at den sentrale delen av bildet blir forkastet. For å bruke den, må du bruke nøkkelordet `fill` i tillegg til tall eller prosenter.

Antall parametere

Forskyvning kan ta 1, 2, 3 eller 4 parametere. Vær oppmerksom på at måleenheter for forskyvning ikke skrives (for eksempel bare 20, ikke 20px). Du kan også angi tykkelse i %.

Antall parametere	Beskrivelse
`1`	Tykkelse for alle sider samtidig.
`2`	1 2; - `1px` for topp og bunn, `2px` for venstre og høyre.
`3`	`1 2 3`; - `1px` for topp, `2px` for venstre og høyre, `3px` for bunn.
`4`	`1 2 3 4`; - `1px` for topp, `2px` for høyre, `3px` for bunn, `4px` for venstre.

Standardverdi: 100%(?).

Eksempel

<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;
}

Eksempel

<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;
}

Se også

egenskapen border-image,
som er en forkortelse for kant-bilde
egenskapen border-image-source,
som angir stien til bildet for kanten
egenskapen border-image-repeat,
som gjentar bildet for kanten
egenskapen border-image-width,
som angir størrelsen på bildet for kanten
egenskapen border-image-outset,
som angir forskyvning av bildet for kanten