Egenskaben border-image-slice

Egenskaben border-image-slice fortæller browseren, hvilke dele af billedet der skal gå til hjørner, og hvilke der skal gå til sider (og hvilken del der vil være central). Til hjørner går der 4 dele, til sider går der 4 dele og én del (den centrale) går til elementets baggrund (valgfrit, nøgleordet fill).

For mere detaljeret information se egenskaben border-image.

Syntaks

<+css+> selektor { border-image-slice: fra 1. til 4. tal | fra 1. til 4. procenter; } <-css->

Ved tal og procenter med mellemrum kan nøgleordet fill stå.

Værdier

Værdi	Beskrivelse
procenter	Procenter beregnes i forhold til billedets størrelse. Vandrette i forhold til bredden, lodrette — i forhold til højden.
tal	Tal er pixels (for rasterbilleder) eller koordinater (for vektorbilleder). Måleenheder angives ikke.
`fill`	Standardadfærd forudsætter, at den centrale del af billedet vil blive kasseret. For at anvende den, skal man bruge nøgleordet `fill` ud over tal eller procenter.

Antal parametre

Forskydningen kan tage 1, 2, 3 eller 4 parametre. Vær opmærksom på, at måleenheder for forskydningen ikke skrives (for eksempel bare 20, og ikke 20px). Man kan også angive tykkelsen i %.

Antal parametre	Beskrivelse
`1`	Tykkelse for alle sider samtidigt.
`2`	1 2; - `1px` for top og bund, `2px` for venstre og højre.
`3`	`1 2 3`; - `1px` for top, `2px` for venstre og højre, `3px` for bund.
`4`	`1 2 3 4`; - `1px` for top, `2px` for højre, `3px` for bund, `4px` for venstre.

Standardværdi: 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å

egenskaben border-image,
som er en sammentrækning for kant-billede
egenskaben border-image-source,
som angiver stien til billedet for kanten
egenskaben border-image-repeat,
som gentagelse af billedet for kanten
egenskaben border-image-width,
som angiver størrelsen på billedet for kanten
egenskaben border-image-outset,
som angiver forskydning af billedet for kanten