সিএসএস(৩) border-image-repeat প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| border-image-repeat | ১৫.০ | ১১.০ | ১৫.০ | ৬.০ | ১৫.০ |
সংজ্ঞা ও ব্যবহার
border-image-repeat প্রোপার্টি দ্বারা বর্ডার ইমেজটি , বৃত্তাকার নাকি লম্বালম্বিভাবে রিপিট করবে তা নির্দেশ করে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| strech | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
border-image-repeat: stretch/repeat/round/initial/inherit;
পরামর্শঃ
- এই প্রোপার্টি টি বর্ডারের সাইড এবং বর্ডারের মধ্যস্থানের ধরন নির্ধারণ করে। এখানে আপনি দুটো ভ্যালু দিতে পারেন। যদি দ্বিতীয় ভ্যালু অগ্রায্য করা হয়, তাহলে এটি প্রথমটির মতোই হবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#sattimg1 {
border: 10px solid transparent;
padding: 10px;
border-image-source: url(../cssref_examples/border_image.jpg);
border-image-repeat: stretch;
border-image-slice: 28;
}
#sattimg2 {
border: 10px solid transparent;
padding: 10px;
border-image-source: url(../cssref_examples/border_image.jpg);
border-image-repeat: round;
border-image-slice: 28;
}
#sattimg3 {
border: 10px solid transparent;
padding: 10px;
border-image-source: url(../cssref_examples/border_image.jpg);
border-image-repeat: repeat;
border-image-slice: 28;
}
</style>
</head>
<body>
<h4> বর্ডার ইমেজটি repeated, rounded অথবা stretched করার জন্য border-image-repeat প্রোপার্টিটি ব্যবহার করা হয়:</h4>
<h4 id="sattimg1">border-image-repeat: stretch;</h4>
<h4 id="sattimg2">border-image-repeat: round;</h4>
<h4 id="sattimg3">border-image-repeat: repeat;</h4>
<h4>এটি একটি ইমেজ:</h4><img src="satt.png">
<h4><strong>নোট:</strong> ইন্টারনেট এক্সপ্লোরার ১০ অথবা তার পূর্বের ভার্সনে border-image-repeat প্রোপার্টিটি সার্পোট করে না।</h4>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.borderImageRepeat="round"উদাহরণ
object.style.borderImageRepeat="round"এর ব্যবহারঃ
<!DOCTYPE html>
<html>
<head>
<style>
#para1{
border: 15px solid transparent;
padding: 15px;
border-image: url(../cssref_examples/border_image.jpg);
border-image-slice: 30;
border-image-repeat: round;
}
</style>
</head>
<body>
<p id="para1"> এই এলিমেন্টে বর্ডার হিসেবে একটি ইমেজ ব্যবহার করা হয়েছে </p>
<p> borderImageWidth প্রোপার্টির ভ্যালু পরিবর্তন করতে "পরিবর্তন করি " বাটনে ক্লিক করুন </p>
<button onclick="myFunction()">পরিবর্তন করি</button>
<script>
function myFunction() {
document.getElementById("para1").style.borderImageRepeat = "stretch";
}
</script>
<p><b> নোট:</b> ইন্টারনেট এক্সপ্লোরার ১০ এবং তার আগের ভার্সনেborder-image-repeat সাপোর্ট করে না </p>
</body>
</html>
ফলাফল
border-image-repeat প্রোপার্টির ভ্যালু-সমূহ
- stretch - ডিফল্ট ভ্যালু। এরিয়া পূর্ণ করার জন্য ইমেজ প্রসারিত হয়।
- repeat - এরিয়া পূর্ণ করার জন্য ইমেজ রিপিট হয়।
- round - এরিয়া পূর্ণ করার জন্য ইমেজ রিপিট হয়। যদি সম্পূর্ন এরিয়া টাইল(repeated) দ্বারা পূর্ন না হয়, ইমেজটি ফিট হওয়ার জন্য ইমেজ রিসাইজ হয়।
- space - এরিয়া পূর্ণ করার জন্য ইমেজ রিপিট হয়। যদি সম্পূর্ন এরিয়া টাইল(repeated) দ্বারা পূর্ন না হয়, অতিরিক্ত স্পেস টাইলের পাশে দিয়ে দেয়।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
border-image-repeat প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।