Eienskap border-image-slice

Die eienskap border-image-slice spesifiseer aan die blaaier watter dele van die prent vir die hoeke sal gaan, en watter vir die kante (en watter deel die sentrale een sal wees). Vir die hoeke gaan 4 dele, vir die kante gaan 4 dele en een deel (die sentrale een) gaan na die agtergrond van die element (opsioneel, die sleutelwoord fill).

Vir meer gedetailleerde inligting, sien die eienskap border-image.

Sintaksis

<+css+> selektor { border-image-slice: van 1-de tot 4-de getalle | van 1-de tot 4-de persentasies; } <-css->

By die getalle en persentasies, met 'n spasie tussen, kan die sleutelwoord fill staan.

Waardes

Waarde	Beskrywing
persentasies	Persentasies word bereken relatief tot die grootte van die beeld. Horisontaal relatief tot die breedte, vertikaal — relatief tot die hoogte.
getalle	Getalle is pixels (vir rasterbeelde) of koördinate (vir vektorbeelde). Eenhede word nie aangedui nie.
`fill`	Die standaardgedrag veronderstel dat die sentrale deel van die beeld weggegooi sal word. Om dit te gebruik, is dit nodig om die sleutelwoord `fill` by te voeg by die getalle of persentasies.

Hoeveelheid parameters

Die verskuiwing kan 1, 2, 3 of 4 parameters aanvaar. Let daarop dat die eenhede vir die verskuiwing nie geskryf word nie (byvoorbeeld, net 20, nie 20px nie). Die dikte kan ook in % gestel word.

Aantal parameters	Beskrywing
`1`	Dikte vir alle kante gelyktydig.
`2`	1 2; - `1px` vir bo en onder, `2px` vir links en regs.
`3`	`1 2 3`; - `1px` vir bo, `2px` vir links en regs, `3px` vir onder.
`4`	`1 2 3 4`; - `1px` vir bo, `2px` vir regs, `3px` vir onder, `4px` vir links.

Standaardwaarde: 100%(?).

Voorbeeld

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

Voorbeeld

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

Sien ook

die eienskap border-image,
wat 'n afkorting is vir die rand-prent
die eienskap border-image-source,
wat die pad na die prent vir die rand spesifiseer
die eienskap border-image-repeat,
wat die herhaling van die prent vir die rand spesifiseer
die eienskap border-image-width,
wat die grootte van die prent vir die rand spesifiseer
die eienskap border-image-outset,
wat die skuif van die prent vir die rand spesifiseer