Ominaisuus border-image-slice

Ominaisuus border-image-slice määrittää selaimelle, mitkä osat kuvasta menevät kulmiin ja mitkä sivuille (ja mikä osa tulee keskustaan). Kulmiin menevät 4 osaa, sivuille menevät 4 osaa ja yksi osa (keskiosa) menee elementin taustaksi (valinnaisesti, avainsana fill).

Lisätietoja katso ominaisuus border-image.

Syntaksi

<+css+> valitsija { border-image-slice: 1:stä 4:ään numeroon | 1:stä 4:ään prosenttiin; } <-css->

Numeroiden ja prosenttien kanssa välilyönnillä erotettuna voi olla avainsana fill.

Arvot

Arvo	Kuvaus
prosentit	Prosentit lasketaan suhteessa kuvan kokoon. Vaakatasossa suhteessa leveyteen, pystytasossa — suhteessa korkeuteen.
numerot	Numerot ovat pikseleitä (bittikarttakuville) tai koordinaatteja (vektorikuville). Mittayksiköitä ei ilmoiteta.
`fill`	Oletuskäyttäytyminen olettaa, että kuvan keskiosa hylätään. Otaaksesi sen käyttöön, täytyy käyttää avainsanaa `fill` numeroiden tai prosenttien lisäksi.

Parametrien määrä

Siirto voi ottaa 1, 2, 3 tai 4 parametria. Huomaa, että mittayksiköitä siirrolle ei kirjoiteta (esimerkiksi vain 20, eikä 20px). Paksuuden voi myös antaa %:na.

Parametrien lukumäärä	Kuvaus
`1`	Paksuus kaikille sivuille samanaikaisesti.
`2`	1 2; - `1px` ylä- ja alaosalle, `2px` vasemmalle ja oikealle.
`3`	`1 2 3`; - `1px` yläosalle, `2px` vasemmalle ja oikealle, `3px` alaosalle.
`4`	`1 2 3 4`; - `1px` yläosalle, `2px` oikealle, `3px` alaosalle, `4px` vasemmalle.

Oletusarvo: 100%(?).

Esimerkki

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

Esimerkki

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

Katso myös

ominaisuus border-image,
joka on lyhenne rajakuvalle
ominaisuus border-image-source,
joka asettaa polun rajan kuvaan
ominaisuus border-image-repeat,
joka toisto rajan kuvan
ominaisuus border-image-width,
joka asettaa rajan kuvan koon
ominaisuus border-image-outset,
joka asettaa rajan kuvan siirron