Veturia border-image-width

Veturia border-image-width kontrollon gjerësinë e pjesës së dukshme të kufirit, e shkallëzon atë. Nëse kjo vlerë është më e madhe se gjerësia border-width, foto e kufirit do të zvarritet nën përmbajtjen.

Për informacion më të hollësishëm shikoni veturinë border-image.

Sintaksa

përzgjedhësi {
	border-image-width: njësi CSS | përqindje | numër | auto;
}

Vlerat

Vlera	Përshkrimi
Njësi CSS	Vlera në njësitë CSS të caktuara.
Përqindje	Vlera në përqindje në raport me madhësinë e bllokut të cilit i është caktuar kufiri.
Numër	Vlera numerike, me të cilën shumëzohet `border-width`.
`auto`	Fjalëkyç. Nëse është caktuar, vlera është e barabartë me `border-image-slice` përkatës. Nëse nuk ka madhësi të përshtatshme, përdoret vlera `border-width`, ku fotoja plotëson të gjithë cepin e kufirit, duke u zvarritur nën përmbajtjen. Shikoni shembujt për një kuptim më të mirë.

Vlera e paracaktuar: 1.

Shembull . Numër

Le të vendosim vlerën border-image-width në 2 gjatë kalimit të miut mbi element. Në këtë rast kufiri do të bëhet me madhësi 26px*2 - 2 herë më i madh se gjerësia e tij, e caktuar në border-width. Kufiri në këtë rast do të kalojë nën tekst (si lloj sfondi):

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

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

Shembull . Ndryshoni border-image-repeat në round

Në shembullin e mëparshëm, gjatë kalimit të miut, në kufi nuk do të ketë një numër të plotë rombesh. Le ta rregullojmë këtë, duke vendosur border-image-repeat në vlerën round:

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

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

Shembull . Përqindje

Le të vendosim vlerën border-image-width në 50% gjatë kalimit të miut mbi element. Në këtë rast kufiri do të bëhet me madhësi 50% nga madhësia e bllokut (domethënë dy kufijtë, i djathti dhe i majti, do ta mbulojnë të gjithë bllokun):

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

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

Shembull . Përqindje

Le të vendosim vlerën border-image-width në 30% gjatë kalimit të miut mbi element. Në këtë rast kufiri do të bëhet me madhësi 30% nga madhësia e bllokut:

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

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

Shembull . Piksel

Le të vendosim vlerën border-image-width në 50px gjatë kalimit të miut mbi element:

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

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

Shembull . Vlera auto

Le të vendosim vlerën border-image-width në auto gjatë kalimit të miut mbi element.

Para kalimit border-image-width ka vlerën 1 (si parazgjedhje). Në shembull border-width është caktuar posaçërisht në 52px, dhe border-image-slice - në vlerën 26 (efekti me auto do të vërehet vetëm nëse border-width nuk është e barabartë me border-image-slice). Për shkak se border-image-width ka vlerën 1, fotoja e kufirit do të zërë të gjithë gjerësinë e border-width, domethënë do të shtrihet në 52px. Gjatë kalimit vlera border-image-width do të vendoset në auto dhe gjerësia e fotos do të bëhet e barabartë me vlerën border-image-slice, domethënë 26px:

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

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

Shihni gjithashtu

veturia border-image,
e cila është një shkurtim për kufirin-foto
veturia border-image-source,
e cila cakon rrugën për foton e kufirit
veturia border-image-slice,
e cila ndarjen e fotos për kufirin
veturia border-image-repeat,
e cila përsëritjen e fotos për kufirin
veturia border-image-outset,
e cila cakon zhvendosjen e fotos për kufirin