border-image-repeat հատկությունը

border-image-repeat border-image-repeat հատկությունը սահմանում է նկարի տեսքով եզրի ներքին մասի կրկնության եղանակը: Ավելի մանրամասն տեղեկությունների համար տեսնել border-image հատկությունը:

Շարահյուսություն

ընտրիչ {
	border-image-repeat: stretch | repeat | round;
}

Արժեքներ

Պարամետրերի քանակ	Նկարագրություն
`stretch`	ձգում է եզրի նկարը մինչև տարրի չափսերը: Այս արժեքն օգտագործվում է լռելայն:
`repeat`	Կրկնում է եզրի նկարը:
`round`	Կրկնում է նկարը և մասշտաբավորում այն այնպես, որ տարրի կողմում լինի նկարների ամբողջ թիվ:

Լռելայն արժեքը՝ stretch:

Պարամետրերի քանակ

Կարող է ընդունել 1 կամ 2 պարամետր: Եթե տրված է երկու պարամետր, ապա առաջինը կլինի վերևի և ներքևի եզրերի համար, իսկ երկրորդ պարամետրը՝ ձախ և աջ եզրերի համար:

Օրինակ . 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;
}

Օրինակ . 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;
}

Օրինակ . Round արժեք

Այժմ նորմալ վիճակում սահմանված է repeat արժեքը, իսկ դիպվածի դեպքում՝ round: Ուշադրություն դարձրեք, որ դիպվածից առաջ եզրում տեղավորվում է ոչ ամբողջ թվով ռոմբեր, իսկ դիպվածից հետո՝ ամբողջ: Այսպես է աշխատում 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;
}

Օրինակ . Երկու բառ

repeat արժեքը լայնության և stretch բարձրության համար:

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

Տես նաև

border-image հատկությունը,
որը հանդիսանում է նկար-եզրի համար հապավում
border-image-source հատկությունը,
որը սահմանում է նկարի ճանապարհը եզրի համար
border-image-slice հատկությունը,
որը բաժանում է նկարը եզրի համար
border-image-width հատկությունը,
որը սահմանում է նկարի չափսը եզրի համար
border-image-outset հատկությունը,
որը սահմանում է նկարի տեղաշարժը եզրի համար