সিএসএস(৩) border-image-width প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| border-image-width | ১৫.০ | ১১.০ | ১৫.০ | ৬.০ | ১৫.০ |
সংজ্ঞা ও ব্যবহার
border-image-width প্রোপার্টি বর্ডার ইমে্জের width নির্ধারন করে।
পরামর্শঃ
- আরো দেখুন border-image প্রোপার্টি (এই প্রোপার্টি দ্বারা সহজেই সব বর্ডার ইমেজের প্রোপার্টি নির্ধারন করা যায়)
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| ১ | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
border-image-width: number/%/auto/initial/inherit;
পরামর্শঃ
- border-image-width প্রোপার্টি ১ থেকে ৪ টি ভ্যালু নিতে পারে (উপর, ডান, নিচে এবং বাম সাইড)। যদি ৪র্থ ভ্যালু না থাকে, তাহলে এটি ২য় ভ্যালুর সমান হবে। যদি ৩য় ভ্যালু না থাকে, তাহলে এটি ১ম ভ্যালুর সমান হবে। যদি ২য় ভ্যালু না থাকে, তাহলে এটি ১ম ভ্যালুর সমান হবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#sattimg1 {
border: 10px solid transparent;
padding: 10px;
border-image-source: url(../cssref_examples/border_image.jpg);
border-image-repeat: round;
border-image-slice: 28;
border-image-width: 20px;
}
#sattimg2 {
border: 10px solid transparent;
padding: 10px;
border-image-source: url(../cssref_examples/border_image.jpg);
border-image-repeat: round;
border-image-slice: 28;
border-image-width: 15px;
}
#sattimg3 {
border: 10px solid transparent;
padding: 10px;
border-image-source: url(../cssref_examples/border_image.jpg);
border-image-repeat: round;
border-image-slice: 28;
border-image-width: 10px;
}
</style>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
</head>
<body>
<h4> border-image-width প্রোপার্টি বর্ডার ইমেজের width নির্ধারন করেঃ </h4>
<h4 id="sattimg1">border-image-width: 20px;</h4>
<h4 id="sattimg2">border-image-width: 15px;</h4>
<h4 id="sattimg3">border-image-width: 10px;</h4>
<h4>অরজিনাল ইমেজ এখানেঃ </h4><img src="../cssref_examples/border_image.jpg">
<h4><b>নোটঃ</b> ইন্টারনেট এক্সপ্লোরার ১০ এবং তার আগের ভার্সনগুলোতে border-image-width প্রোপার্টি সাপোর্ট করে না।</h4>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.borderImageWidth="20px"উদাহরণ
<!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-width: 10px;
border-image-repeat: round;
}
</style>
</head>
<body>
<p id="para1"> এই এলিমেন্টে একটি ইমেজকে বর্ডার হিসেবে ব্যবহার করা হয়েছে </p>
<p>DIV এলিমেন্টের border-Image-Width প্রোপার্টি পরিবর্তন করতে "পরিবর্তন করি " বাটনে ক্লিক করুন:</p>
<button onclick="myFunction()">পরিবর্তন করি </button>
<script>
function myFunction() {
document.getElementById("para1").style.borderImageWidth = "20px 30px";
}
</script>
<p><b>নোট :</b> ইন্টারনেট এক্সপ্লোরার ১০ এবং তার আগের ভার্সনে border-image-width সাপোর্ট করে না </p>
</body>
</html>
ফলাফল
border-image-width প্রোপার্টির ভ্যালু-সমূহ
- length - length ইউনিট (px) বর্ডার width এর সাইজ নির্দেশ করে।
- number - ডিফল্ট ভ্যালু ১। অনূরুপ অনেকগুলো বর্ডার width নির্দেশ করে।
- % -বর্ডার ইমেজের সাইজ নির্দেশ করে: এরিয়ার পাশাপাশি(horizontal ) width , এরিয়ার লম্বালম্বি(horizontal ) height নির্দেশ করে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
border-image-width প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।