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 ගුණය,
සීමාව සඳහා පින්තූරයේ මාරුව සකසයි