এইচটিএমএল ডম বর্ডার ইমেজস্লাইস প্রপার্টি ব্যবহার করা হয় কিভাবে একটি বর্ডার ইমেজকে অঞ্চলে ভাগ করা হয় তা নির্ধারণ করতে। শতাংশ, সংখ্যা বা বৈশ্বিক মানগুলিতে সীমানা ইমেজ অফসেটগুলি নির্দিষ্ট করে এটি করা হয়৷
−
-এর সিনট্যাক্স নিচে দেওয়া হলবর্ডার ইমেজস্লাইস প্রপার্টি −
সেট করা হচ্ছেobject.style.borderImageSlice = "number|%|fill|initial|inherit"
উপরের বৈশিষ্ট্যগুলি নিম্নরূপ ব্যাখ্যা করা হয়েছে -
| মান | বিবরণ |
|---|---|
| নম্বর | এটি একটি রাস্টার চিত্রে পিক্সেল বা ভেক্টর চিত্রে ভেক্টর স্থানাঙ্ক বোঝাতে ব্যবহৃত হয়। |
| % | এগুলি ছবির আকারের সাথে সম্পর্কিত অনুভূমিক এবং উল্লম্ব অফসেটগুলি নির্দিষ্ট করার জন্য ব্যবহৃত হয়। এর ডিফল্ট মান হল 100%। |
| অসুস্থ | এটি সীমানা-চিত্রের মধ্যবর্তী অংশ সংরক্ষণের জন্য ব্যবহৃত হয়। |
| প্রাথমিক | এই সম্পত্তি ডিফল্ট মান সেট করার জন্য। |
| উত্তরাধিকার | অভিভাবক সম্পত্তি মান উত্তরাধিকারসূত্রে পেতে। |
চলুন আমরা বর্ডার ইমেজস্লাইস প্রপার্টি -
এর একটি উদাহরণ দেখিউদাহরণ
<!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="The border image slice is now changed";
}
</script>
</head>
<body>
<div id="b1">This is some sample text inside div</div>
<p>Change the above div border image slice…</p>
<button onclick="changeBorderSlice()">Change Border Slice</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
"চেঞ্জ বর্ডার স্লাইস" ক্লিক করলে বোতাম -
