Vetia border-image-repeat

Vetia border-image-repeat përcakton se si pjesa e brendshme e një kornize përsëritet si imazh. Për më shumë detaje, shiko vetinë border-image.

Sintaksa

selector {
	border-image-repeat: stretch | repeat | round;
}

Vlerat

Numri i parametrave	Përshkrimi
`stretch`	Shtrin një imazh kornize në madhësinë e elementit. Kjo është vlera e parazgjedhur.
`repeat`	Përsërit një imazh kornize.
`round`	Përsërit një imazh dhe e shkallëzon atë në mënyrë që të ketë një numër të plotë imazhesh në anën e elementit.

Vlera e parazgjedhur: stretch.

Numri i parametrave

Mund të marrë 1 ose 2 parametra. Nëse jepen dy parametra, atëherë i pari do të jetë për kornizat e sipërme dhe të poshtme, dhe parametri i dytë do të jetë për të majtën dhe të djathtën.

Shembull . Vlera stretch

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

Shembull . Vlera repeat

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

Shembull . Vlera round

Tani në gjendjen normale vlera është vendosur në repeat, dhe në hover - round. Ju lutem vini re se para hover, nuk vendoset një numër i plotë i rombeve në kornizë, por pas hover - një numër i plotë. Kështu funksionon round:

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

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

Shembull . Dy vlera

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

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

#elem {
	border-image-repeat: repeat stretch;
	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;
}

Shih gjithashtu

vetia border-image
që është shkurtim për një imazh kornize
vetia border-image-source
që përcakton një rrugë imazhi për një kornizë
vetia border-image-slice
që përcakton një ndarje imazhi për një kornizë
vetia border-image-width
që vendos një gjerësi imazhi për një kornizë
vetia border-image-outset
që vendos një fillim imazhi për një kornizë