Egenskapen border-image-slice

Egenskapen border-image-slice talar om för webbläsaren vilka delar av bilden som ska gå till hörnen, och vilka som ska gå till sidorna (och vilken del som blir den centrala). Till hörnen går 4 delar, till sidorna går 4 delar och en del (den centrala) går till elementets bakgrund (valfritt, nyckelordet fill).

För mer detaljerad information, se egenskapen border-image.

Syntax

<+css+> selector { border-image-slice: från 1:a till 4:e tal | från 1:a till 4:e procent; } <-css->

Efter talen och procenten med mellanslag kan nyckelordet fill stå.

Värden

Värde	Beskrivning
procent	Procent beräknas i förhållande till bildens storlek. Horisontella i förhållande till bredden, vertikala — i förhållande till höjden.
tal	Tal är pixlar (för rasterbilder) eller koordinater (för vektorbilder). Måttenheter anges inte.
`fill`	Standardbeteendet antar att den centrala delen av bilden kommer att kasseras. För att använda den, måste du använda nyckelordet `fill` utöver talen eller procenten.

Antal parametrar

Förskjutningen kan ta 1, 2, 3 eller 4 parametrar. Var uppmärksam på att måttenheter för förskjutningen inte skrivs (till exempel bara 20, inte 20px). Tjockleken kan också anges i %.

Antal parametrar	Beskrivning
`1`	Tjocklek för alla sidor samtidigt.
`2`	1 2; - `1px` för toppen och botten, `2px` för vänster och höger.
`3`	`1 2 3`; - `1px` för toppen, `2px` för vänster och höger, `3px` för botten.
`4`	`1 2 3 4`; - `1px` för toppen, `2px` för höger, `3px` för botten, `4px` för vänster.

Standardvärde: 100%(?).

Exempel

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

Exempel

<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 även

egenskapen border-image,
som är en förkortning för bildkant
egenskapen border-image-source,
som anger sökvägen till bilden för kanten
egenskapen border-image-repeat,
som upprepning av bilden för kanten
egenskapen border-image-width,
som anger storleken på bilden för kanten
egenskapen border-image-outset,
som anger förskjutningen av bilden för kanten