Omadus border-image

Omadus border-image määrab pildi piiri jaoks, see on lühendatud omadus omaduste border-image-source, border-image-slice, border-image-repeat, border-image-width ja border-image-outset jaoks. Samal ajal lühendatud omadus ilmus CSS-is varem kui lühendatud omadused ja seetõttu toetatakse seda rohkemates vanemates brauserites.

Süntaks

selektor {
	border-image: url(pildi tee) nihe/paksus/nihke_kaugus kordus;
}

Kirjeldus

Pilt, mida tahame rakendada piirile, peab olema vormistatud spetsiaalsel viisil: 4 minipilti nurkade jaoks ja 4 pilti külgede jaoks. Sellise pildi näide:

Sel juhul on keskmine osa jäetud tühjaks (kuna me ei soovi, et see satuks elemendi taustale). Näide pildist, mille keskmine osa on täidetud:

Väärtus slice näitab brauserile, millised pildi osad lähevad nurkadesse ja millised külgedele (ja milline osa saab keskmiseks). Nurkadesse läheb 4 osa, külgedele läheb 4 osa ja üks osa (keskmine) läheb elemendi taustale (valikuline, võtmesõna fill).

Pilt "lõigatakse" tükkideks järgmisel viisil: väärtusele slice määratakse ühest nelja väärtuseni. Vaatame näidet. Oletame, et on määratud järgmised väärtused: 10 20 30 40 (pikslit px ei märgita, see on seotud sellega, et pilt võib olla nii raster- kui vektorpilt). Väärtused ütlevad järgmist: 10 lõika ülevalt, 20 lõika paremalt, 30 lõika alt, 40 lõika vasakult. Milline pildi osa satub vasakusse ülanurka? See on tükk: 10 ülevalt, 40 vasakult. Paremasse ülanurka satub 10 ülevalt, 20 paremalt. Ja nii edasi.

Enamasti on pilt sümmeetriline (nagu ülal olevad rombid) ja me peame lõikama võrdsed tükid nurkadesse. Sellisel juhul määratakse üks väärtus, mis määrab samad nihked kõigilt poolt. Oranžide rombide lõikamiseks määrame slice väärtuseks 26 (kuna oranzil rombil on suurus 26px korda 26px). Kollased rombid satuvad piirijoonele ja nendega juhtub järgmist: nad kas venitatakse kogu ploki ulatuses või korduvad piiri ulatuses (sõltub väärtusest 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;
}

Omadus border-image ei võimalda määrata elemendi piiri paksust. Brauser lihtsalt venitab pildi piiri ulatuses juba olemasoleva laiusega. Seetõttu tuleb seda määrata omaduse border kaudu.

Vanemate brauserite kasutajad (või keelatud piltidega) näevad standardset raami, mis on määratud border-is, seetõttu on mõistlik määrata sellele sobivad stiil ja värv.

Väärtused

Väärtus	Kirjeldus
url(Pildi tee)	Pildi tee. Üksikasjalikumalt vaata `border-image-source`.
nihe	Näitab brauserile, millised pildi osad lähevad nurkadesse, millised külgedele (ja milline osa saab keskmiseks). Võimalikud väärtused: `1` kuni `4` arvu \| `1` kuni `4` protsenti. Tühikuga saab lisaks arvudele või protsentidele määrata võtmesõna `fill`. Üksikasjalikumalt vaata `border-image-slice`.
paksus	Omadus kontrollib raami nähtava osa laiust, skaleerib seda. Kui see väärtus on suurem kui `border-width` laius, siis pildi raam roomab sisu alla. Võimalikud väärtused: CSS ühikud \| protsendid \| arv \| `auto`. Üksikasjalikumalt vaata `border-image-width`.
nihke_kaugus	Huvitav omadus, mis võimaldab nihutada raami elemendist kaugemale. Negatiivsed väärtused ei ole toetatud. Võimalikud väärtused: CSS ühikud (välja arvatud % (?)) \| positiivne arv \| auto. Üksikasjalikumalt vaata `border-image-outset`.
kordus	Näitab, kuidas kordada pilti piiridel (mitte nurkadel): plaatida või venitada. Võimalikud väärtused: `stretch` \| `repeat` \| `round` \| `space`. Üksikasjalikumalt vaata `border-image-repeat`.

Vaikeväärtus: none 100%/1/0 stretch (url(pildi tee) nihe/paksus/nihke_kaugus kordus).

Näide . border-image-repeat: väärtus 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;
}

Näide . border-image-repeat: väärtus 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;
}

Näide . border-image-repeat: väärtus round

Praegu on tavaseisundis määratud väärtus repeat, ja kursoriga peale minnes - round. Pane tähele, et enne kursoriga peale minnemist ei mahu piirisse täisarvuline kogus rombe, aga peale kursoriga peale minemist - täisarvuline. Nii kippi 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;
}

Näide . border-image-repeat: kaks sõna

Väärtus repeat laiuse ja stretch kõrguse jaoks:

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

Näide . Pildi laiuse ja piiri laiuse ühtimine

Suurendame border-width kursoriga peale minnes, samal ajal jättes paksuse border-image samaks. Rombid venivad kogu piirile:

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

Näide . border-image-slice

Võtame teise pildi, milles erinevad tükid ei ole võrdsed:

Määrame, millised osad pildist tuleb lõigata - 25% 30% 10% 20%. See töötab nii: 25% - nihe ülevalt, 30% - nihe paremalt, 10% - nihe alt, 20% - nihe vasakult. Põhimõtteliselt lõikame nende tükkidega nurgad. Ülemine vasak nurk on 25% pildi ülaosast ja 20% vasakult. Ülemine parem nurk on 25% pildi ülaosast, ja 30% paremalt ja nii edasi.

Samuti, kui sa viidad kursoriga plokile, siis aktiveerub võtmesõna fill, ja pildi keskmine osa muutub meie ploki taustaks:

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

Näide

Teeme gradienteeritud piiri kasutades lineaarset gradienti:

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

Näide . border-image-width

Määrame väärtuse border-image-width väärtuseks 2 (piiri pilt muutub 2 korda suuremaks kui piir ise) kursoriga elemendi peale minnes (26/2 - määratud kaldkriipsu järel, kusjuures 26 - see on väärtus border-image-slice). Pane tähele, et piir ise ei suurenenud, aga piiri pilt - jah, kuna see roomab teksti alla:

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

Näide . border-image-outset

Määrame väärtuse border-image-outset väärtuseks 3 kursoriga elemendi peale minnes. (26/1/2 - määratud teise kaldkriipsu järel, kusjuures 26 - see on väärtus border-image-slice, ja - 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;
}

Vaata ka

omadus border-image-source,
mis määrab pildi tee piiri jaoks
omadus border-image-slice,
mis määrab pildi jaotuse piiri jaoks
omadus border-image-repeat,
mis määrab pildi kordamise piiri jaoks
omadus border-image-width,
mis määrab pildi suuruse piiri jaoks
omadus border-image-outset,
mis määrab pildi nihke piiri jaoks