Die border-image eienskap

Die eienskap border-image stel 'n prentjie vir die grens, dit is 'n kortkode eienskap vir die eienskappe border-image-source, border-image-slice, border-image-repeat, border-image-width en border-image-outset. Die kortkode-eienskap het egter in CSS verskyn voor die ingekorte eienskappe en daarom word dit ondersteun in 'n groter aantal ouer blaaiers.

Sintaksis

selektor {
	border-image: url(pad na die prentjie) verskuiwing/dikte/verskuiwing herhaling;
}

Beskrywing

Die prentjie wat ons wil toepas vir die grens, moet op 'n spesiale manier geformateer word: 4 mini prentjies vir die hoeke en 4 prentjies vir die kante. Voorbeeld van so 'n prentjie:

In hierdie geval is die sentrale deel wit gelaat (aangesien ons nie wil hê dat dit op die agtergrond van die element moet verskyn nie). Voorbeeld van 'n prentjie met 'n gevulde sentrale deel:

Die waarde slice wys die blaaiers, watter dele van die prentjie sal na die hoeke gaan, en watter na die kante (en watter deel sal sentraal wees). Na die hoeke gaan 4 dele, na die kante gaan 4 dele en een deel (die sentrale) gaan na die agtergrond van die element (opsioneel, die sleutel woord fill).

Die prentjie word "gesny" in stukke op die volgende manier: vir die waarde slice word een tot vier waardes gespesifiseer. Kom ons kyk na 'n voorbeeld. Gestel die volgende waardes is gespesifiseer: 10 20 30 40 (pixels px word nie aangedui nie, dit is omdat die prentjie beide raster- en vektor kan wees). Die waardes beteken die volgende: 10 sny van bo af, 20 sny van regs af, 30 sny van onder af, 40 sny van links af. Watter deel van die prentjie sal in die linkerbovenhoek beland? Dit sal die stukkie wees: 10 van bo af, 40 van links af. In die regter bovenhoek sal beland 10 van bo af, 20 van regs af. En so meer.

Meestal is die prentjie simmetries (soos die ruitjies hierbo) en moet ons gelyke stukke sny vir die hoeke. In so 'n geval word een waarde gespesifiseer, wat dieselfde verskuiwings van alle kante sal spesifiseer. Om die oranje ruitjies te sny, sal ons slice as 26 spesifiseer (aangesien die oranje ruitjie 'n grootte van 26px op 26px het). Geel ruitjies sal op die lyne van die grens beland en die volgende sal met hulle gebeur: hulle sal óf oor die hele blok gestrek word óf herhaal word langs die grens (afhangende van die waarde repeat):

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

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

Die eienskap border-image laat nie toe om die dikte van die grens van die element te spesifiseer nie. Die blaaiers strek eenvoudig die beeld langs die grens met die reeds bestaande breedte. Daarom moet dit gespesifiseer word deur die eienskap border.

Gebruikers van ouer blaaiers (of met afgeskakelde prentjies) sal die standaardraam sien, gespesifiseer in border, daarom is dit sinvol om vir dit geskikte styl en kleur te spesifiseer.

Waardes

Waarde	Beskrywing
url(Pad na die prentjie)	Pad na die prentjie. Sien meer details by `border-image-source`.
verskuiwing	Wys die blaaiers watter dele van die prentjie na die hoeke sal gaan, en watter na die kante (en watter deel sentraal sal wees). Moontlike waardes: van `1`-ste tot `4`-de getalle \| van `1`-ste tot `4`-de persentasies. Deur 'n spasie kan die sleutelwoord `fill` gespesifiseer word in aanvulling tot getalle of persentasies. Sien meer details by `border-image-slice`.
dikte	Die eienskap beheer die breedte van die sigbare deel van die raam, skaal dit. As hierdie waarde groter is as die breedte van `border-width`, sal die prentjie van die raam onder die inhoud in kruip. Moontlike waardes: CSS eenhede \| persentasies \| getal \| `auto`. Sien meer details by `border-image-width`.
verskuiwing	Interessante eienskap wat dit moontlik maak om die raam buite die element te skuif. Negatiewe waardes word nie ondersteun nie. Moontlike waardes: CSS eenhede (behalve % (?)) \| positiewe getal \| auto. Sien meer details by `border-image-outset`.
herhaling	Spesifiseer hoe om die prentjie op die grense te herhaal (nie op die hoeke nie): teël of strek. Moontlike waardes: `stretch` \| `repeat` \| `round` \| `space`. Sien meer details by `border-image-repeat`.

Standaardwaarde: none 100%/1/0 stretch (url(pad na die prentjie) verskuiwing/dikte/verskuiwing herhaling).

Voorbeeld . border-image-repeat: waarde repeat

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Voorbeeld . border-image-repeat: waarde stretch

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Voorbeeld . border-image-repeat: waarde round

Tans, in die normale toestand, is die waarde repeat gestel, en met wyser-oordrag - round. Let daarop dat voor wyser-oordrag daar nie 'n heelgetal van ruitjies in die grens pas nie, en na wyser-oordrag - wel. So werk round:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26 round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Voorbeeld . border-image-repeat: twee woorde

Waarde repeat vir breedte en stretch vir hoogte:

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Voorbeeld . Ooreenstemming van prentjiebreedte met grensbreedte

Laat ons die border-width vergroot met wyser-oordrag, terwyl die dikte van border-image soos voorheen gelaat word. Die ruitjies sal oor die hele grens gestrek word:

<div id="elem"></div>

#elem:hover {
	border-width: 52px;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Voorbeeld . border-image-slice

Kom ons neem 'n ander prentjie, waarin verskillende stukkies nie gelyk is nie:

Kom ons spesifiseer watter dele van die prentjie afgesny moet word - 25% 30% 10% 20%. Dit werk so: 25% - inskuiwing van bo af, 30% - inskuiwing van regs af, 10% - inskuiwing van onder af, 20% - inskuiwing van links af. In wese sny ons met hierdie stukke die hoeke af. Die boonste linkerhoek sal 25% van bo af die prentjie wees, en 20% van links af. Die boonste regterhoek sal 25% van bo af die prentjie wees, en 30% van regs af, en so meer.

Ook, as jy die wyser op die blok beweeg, sal die sleutelwoord fill aktiveer, en die sentrale deel van die prentjie sal die agtergrond van ons blok word:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Voorbeeld

Kom ons maak 'n gradient grens met behulp van 'n lineêre gradient:

<div id="elem"></div>

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Voorbeeld . border-image-width

Kom ons stel die waarde border-image-width as 2 (die grens prentjie sal 2 keer groter word as die grens self) met wyser-oordrag op die element (26/2 - gespesifiseer na die skuinsstreep, terwyl 26 die waarde van border-image-slice is). Let daarop dat die grens self nie vergroot het nie, maar die grens prentjie - wel, aangesien dit onder die teks sal inbeweeg:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/2 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Voorbeeld . border-image-outset

Kom ons stel die waarde border-image-outset as 3 met wyser-oordrag op die element. (26/1/2 - gespesifiseer na die tweede skuinsstreep, terwyl 26 die waarde van border-image-slice is, en - 1 - border-image-width):

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/1/3 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Sien ook

die eienskap border-image-source,
wat die pad na die prentjie vir die grens spesifiseer
die eienskap border-image-slice,
wat die sny van die prentjie vir die grens spesifiseer
die eienskap border-image-repeat,
wat die herhaling van die prentjie vir die grens spesifiseer
die eienskap border-image-width,
wat die grootte van die prentjie vir die grens spesifiseer
die eienskap border-image-outset,
wat die verskuiwing van die prentjie vir die grens spesifiseer