এইচটিএমএল ডম বর্ডার ইমেজরিপিট প্রপার্টিটি বর্ডার ইমেজে ইমেজের স্লাইসগুলি কীভাবে পুনরাবৃত্তি করা হয় তা নির্ধারণ করতে ব্যবহৃত হয়। বর্ডার ইমেজ বৃত্তাকার, পুনরাবৃত্তি বা প্রসারিত হলে এটি সেট বা পায়।
সিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলবর্ডার ইমেজরিপিট প্রপার্টি সেট করা হচ্ছে।
object.style.borderImageRepeat = "stretch|repeat|round|initial|inherit"
মান
সম্পত্তি মান নিম্নরূপ ব্যাখ্যা করা হয় −
| Sr.No | মান ও বর্ণনা |
|---|---|
| 1 | স্ট্রেচ এটি এলাকাটি পূরণ করতে চিত্রটিকে প্রসারিত করে তোলে। এটি ডিফল্ট মান। |
| 2 | পুনরাবৃত্তি এই ছবিটি এলাকা পূরণ করতে পুনরাবৃত্তি হয় তোলে. |
| 3 | বৃত্তাকার চিত্রটি সাধারণত এলাকাটি পূরণ করার জন্য পুনরাবৃত্তি করা হয় এবং এটি পুনঃস্কেল করা হয় যদি এটি এলাকাটি পূর্ণ সংখ্যা দিয়ে পূরণ না করে। |
| 4 | স্পেস বৃত্তাকার হিসাবে একই কিন্তু যদি ছবিটি পুরো সংখ্যক বার পুনরাবৃত্তি না হয় তবে টাইলের চারপাশে স্থান বিতরণ করা হয়। |
| 5 | প্রাথমিক এই সম্পত্তি প্রাথমিক মান সেট করার জন্য. |
| 6 | উত্তরাধিকার পিতামাতার সম্পত্তির মান উত্তরাধিকার সূত্রে পাওয়া |
উদাহরণ
−
-এর বর্ডার ইমেজরিপিট প্রপার্টির একটি উদাহরণ দেখা যাক<!DOCTYPE html>
<html>
<head>
<style>
#b1 {
border: 30px solid transparent;
padding: 5px;
border-image-source:
url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structurealgorithm.jpg");
border-image-repeat: repeat;
border-image-slice: 30;
}
</style>
<script>
function changeBorderRepeat(){
document.getElementById("b1").style.borderImageRepeat="stretch";
document.getElementById("Sample").innerHTML="The border image will now be
stretched";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<p id="b1">This is some random text inside the paragraph. Here is another line in this paragraph</p>
<p>Change the above div border image repeat property by clicking the below button</p>
<button onclick="changeBorderRepeat()">Change Border Repeat</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
কোলাপস বর্ডার বোতামে ক্লিক করলে -
