বৈশিষ্ট্য 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,
যা সীমানার জন্য ছবির সরণ নির্দিষ্ট করে