Veturia border-image

Veturia border-image vendos një imazh për kufirin, ajo është një veturi e shkurtuar për veturitë border-image-source, border-image-slice, border-image-repeat, border-image-width dhe border-image-outset. Ndërsa veturia e shkurtuar u shfaq në CSS më herët se veturitë e shkurtuara dhe për këtë arsye është e mbështetur në një numër më të madh të shfletuesve të vjetër.

Sintaksa

përzgjedhësi {
	border-image: url(rruga te imazhi) zhvendosje/trashësi/zhvendosje përsëritje;
}

Përshkrim

Imazhi që duam të përdorim për kufirin, duhet të jetë i formatuar në mënyrë të veçantë: 4 imazhe mini për qoshet dhe 4 imazhe për anët. Shembull i një imazhi të tillë:

Në këtë rast pjesa qendrore është lënë e bardhë (pasi ne nuk duam që ajo të bjerë në sfondin e elementit). Shembull i një imazhi me pjesën qendrore të mbushur:

Vlera slice i tregon shfletuesit, cilat pjesë të imazhit do të shkojnë për qoshet, ndërsa cilat për anët (dhe cila pjesë do të jetë qendrore). Për qoshet shkojnë 4 pjesë, për anët shkojnë 4 pjesë dhe një pjesë (qendrore) shkon në sfondin e elementit (opsionale, fjala kyçe fill).

Imazhi "pritet" në copëza në mënyrën e mëposhtme: për vlerën slice specifikohet nga një deri në katër vlera. Le ta shpjegojmë me një shembull. Le të specifikohen vlerat e mëposhtme: 10 20 30 40 (pikselët px nuk specifikohen, kjo lidhet me faktin se imazhi mund të jetë i rasterizuar dhe vektorial). Vlerat tregojnë sa vijon: 10 të pritet nga lart, 20 të pritet nga e djathta, 30 të pritet nga poshtë, 40 të pritet nga e majta. Cila pjesë e imazhit do të bjerë në këndin e sipërm të majtë? Do të jetë copëza: 10 nga lart, 40 nga e majta. Në këndin e sipërm të djathtë do të bjerë 10 nga lart, 20 nga e djathta. E kështu me radhë.

Shpesh imazhi është simetrik (si rombet e mësipërme) dhe ne duhet të presim copëza të barabarta për qoshet. Në këtë rast specifikohet një vlerë, e cila do të caktojë zhvendosje të njëjta nga të gjitha anët. Për të prerë rombet portokalli, ne do të specifikojmë slice si 26 (pasi rombi portokall ka madhësi 26px me 26px). Rombet e verdhë do të bien në vija të kufirit dhe me to do të ndodhë e mëposhtme: ato ose do të shtrihen në të gjithë bllokun ose do të përsëriten përgjatë kufirit (varet nga vlera 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;
}

Veturia border-image nuk lejon të specifikohet trashësia e kufirit të elementit. Shfletuesi thjesht e shtrin imazhin përgjatë kufirit me gjerësinë ekzistuese. Prandaj ajo duhet të caktohet përmes veturisë border.

Përdoruesit e shfletuesve të vjetër (ose me imazhe të çaktivizuara) do të shohin një kornizë standarde, të caktuar në border, prandaj ka kuptim t'i caktohet asaj stile dhe ngjyra të përshtatshme.

Vlerat

Vlera	Përshkrimi
url(Rruga te imazhi)	Rruga te imazhi. Për më shumë detaje shikoni `border-image-source`.
zhvendosje	I tregon shfletuesit, cilat pjesë të imazhit do të shkojnë për qoshet, dhe cilat për anët (dhe cila pjesë do të jetë qendrore). Vlerat e mundshme: nga `1`-ra deri në `4` numra \| nga `1`-ra deri në `4` përqindje. Nëpërmjet hapësirës mund të specifikohet fjala kyçe `fill` përveç numrave ose përqindjeve. Për më shumë detaje shikoni `border-image-slice`.
trashësi	Veturia kontrollon gjerësinë e pjesës së dukshme të kornizës, e shkallëzon atë. Nëse kjo vlerë është më e madhe se gjerësia e `border-width`, imazhi i kornizës do të zvarritet nën përmbajtjen. Vlerat e mundshme: Njësitë CSS \| përqindje \| numër \| `auto`. Për më shumë detaje shikoni `border-image-width`.
zhvendosje	Veturi interesante, që lejon të zhvendosë kornizën jashtë kufijve të elementit. Vlerat negative nuk mbështeten. Vlerat e mundshme: Njësitë CSS (përveç % (?)) \| numër pozitiv \| auto. Për më shumë detaje shikoni `border-image-outset`.
përsëritje	Tregon si të përsëritet imazhi në kufijtë (jo në qoshet): të shtrohet me pllaka ose të shtrihet. Vlerat e mundshme: `stretch` \| `repeat` \| `round` \| `space`. Për më shumë detaje shikoni `border-image-repeat`.

Vlera e paracaktuar: none 100%/1/0 stretch (url(rruga te imazhi) zhvendosje/trashësi/zhvendosje përsëritje).

Shembull . border-image-repeat: vlera 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;
}

Shembull . border-image-repeat: vlera 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;
}

Shembull . border-image-repeat: vlera round

Tani në gjendjen normale është vendosur vlera repeat, ndërsa kur kursorin e miut e vendosim mbi të - round. Kushtojini vëmendje që para se të vendosni kursorin e miut në kufir futet një numër jo i plotë i rombeve, ndërsa pas vendosjes së kursorit të miut - një numër i plotë. Kështu funksionon 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;
}

Shembull . border-image-repeat: dy fjalë

Vlera repeat për gjerësinë dhe stretch për lartësinë:

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

Shembull . Përputhja e gjerësisë së imazhit me gjerësinë e kufirit

Le të rrisim border-width kur vendosim kursorin e miut mbi të, ndërsa trashësinë e border-image do ta lëmë të njëjtë. Rombet do të shtrihen në të gjithë kufirin:

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

Shembull . border-image-slice

Le të marrim një imazh tjetër, në të cilin copëzat e ndryshme nuk janë të barabarta:

Le të specifikojmë, cilat pjesë nga imazhi duhen prerë - 25% 30% 10% 20%. Funksionon kështu: 25% - zhvendosje nga lart, 30% - zhvendosje nga e djathta, 10% - zhvendosje nga poshtë, 20% - zhvendosje nga e majta. Në thelb me këto copëza ne presim qoshet. Këndi i sipërm i majtë do të jetë 25% nga lart i imazhit, dhe 20% nga e majta. Këndi i sipërm i djathtë do të jetë 25% nga lart i imazhit, dhe 30% nga e djathta dhe kështu me radhë.

Gjithashtu, nëse ju e vendosni kursorin e miut mbi bllok, atëherë do të aktivizohet fjala kyçe fill, dhe pjesa qendrore e imazhit do të bëhet sfondi i bllokut tonë:

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

Shembull

Le të bëjmë një kufi me gradient duke përdorur gradientin linear:

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

Shembull . border-image-width

Le të vendosim vlerën border-image-width në 2 (imazhi i kufirit do të bëhet 2 herë më i madh se vetë kufiri) kur vendosim kursorin e miut mbi elementin (26/2 - e specifikuam pas së pjerrës, ndërsa 26 - është vlera e border-image-slice). Kushtojini vëmendje faktit që vetë kufiri nuk u rrit, ndërsa imazhi i kufirit - po, pasi ai do të zvarritet nën tekst:

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

Shembull . border-image-outset

Le të vendosim vlerën border-image-outset në 3 kur vendosim kursorin e miut mbi elementin. (26/1/2 - e specifikuam pas së pjerrës së dytë, ndërsa 26 - është vlera e border-image-slice, dhe - 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;
}

Shihni gjithashtu

veturia border-image-source,
e cila cakton rrugën te imazhi për kufirin
veturia border-image-slice,
e cila cakton ndarjen e imazhit për kufirin
veturia border-image-repeat,
e cila cakton përsëritjen e imazhit për kufirin
veturia border-image-width,
e cila cakton madhësinë e imazhit për kufirin
veturia border-image-outset,
e cila cakton zhvendosjen e imazhit për kufirin