Savybė border-image-repeat

Savybė border-image-repeat nurodo kaip pakartoti krašto vaizdo vidinę dalį. Išsamesnei informacijai žiūrėkite savybę border-image.

Sintaksė

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

Reikšmės

Parametrų skaičius	Aprašas
`stretch`	Ištempia krašto piešinį iki elemento dydžio. Ši reikšmė naudojama pagal nutylėjimą.
`repeat`	Pakartoja krašto piešinį.
`round`	Pakartoja piešinį ir keičia jo mastelį taip, kad elemento šone būtų sveikas skaičius paveikslėlių.

Reikšmė pagal nutylėjimą: stretch.

Parametrų kiekis

Gali priimti 1 arba 2 parametrus. Jei nurodyta du parametrai, tai pirmasis iš jų bus viršutiniam ir apatiniam kraštui, o antrasis parametras - kairiajam ir dešiniajam.

Pavyzdys . Reikšmė 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;
}

Pavyzdys . Reikšmė 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;
}

Pavyzdys . Reikšmė round

Dabar normalioje būsenoje nustatyta reikšmė repeat, o užvedus pelę - round. Atkreipkite dėmesį, kad prieš užvedant į kraštą telpa ne sveikas skaičius rombelių, o po užvedimo - sveikas. Taip ir veikia 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;
}

Pavyzdys . Du žodžiai

Reikšmė repeat plotiui ir stretch aukščiui:

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

Taip pat žiūrėkite

savybė border-image,
kuri yra santrumpa krašto vaizdui
savybė border-image-source,
kuri nurodo kelią prie paveikslėlio kraštui
savybė border-image-slice,
kuri padalija paveikslėlį kraštui
savybė border-image-width,
kuri nurodo paveikslėlio dydį kraštui
savybė border-image-outset,
kuri nurodo paveikslėlio poslinkį kraštui