HTML DOM borderImageSlice প্রপার্টি একটি বর্ডার ইমেজ কীভাবে অঞ্চলগুলিতে বিভক্ত হবে তা নির্ধারণ করতে ব্যবহৃত হয়। এটি বর্ডার ইমেজ অফসেট শতাংশ, সংখ্যা বা গ্লোবাল মান নির্দিষ্ট করে করা হয়।
সিনট্যাক্স
borderImageSlice প্রপার্টি সেট করার সিনট্যাক্স:
object.style.borderImageSlice = "number|%|fill|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| number | রাস্টার ইমেজে পিক্সেল বা ভেক্টর ইমেজে ভেক্টর কোঅর্ডিনেট নির্দেশ করতে ব্যবহৃত হয়। |
| % | ছবির আকারের সাপেক্ষে অনুভূমিক এবং লম্বিক অফসেট নির্দিষ্ট করতে ব্যবহৃত হয়। এর ডিফল্ট মান ১০০%। |
| fill | বর্ডার-ইমেজের মধ্যভাগ সংরক্ষণ করতে ব্যবহৃত হয়। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!DOCTYPE html> <html> <head> <style> div { width: 50%; } #b1 { border: 30px solid transparent; padding: 5px; font-size:20px; border-image: url("https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg"); border-image-slice: 60%; } </style> <script> function changeBorderSlice(){ document.getElementById("b1").style.borderImageSlice="10%"; document.getElementById("Sample").innerHTML="বর্ডার ইমেজ স্লাইস এখন পরিবর্তিত হয়েছে"; } </script> </head> <body> <div id="b1">This is some sample text inside div</div> <p>নিচের বাটনে ক্লিক করলে উপরের div-এর বর্ডার ইমেজ স্লাইস পরিবর্তন হবে...</p> <button onclick="changeBorderSlice()">বর্ডার স্লাইস পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
বর্ডার স্লাইস পরিবর্তন করুন বাটনে ক্লিক করলে:
