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