HTML DOM borderImageOutset প্রপার্টি ব্যবহার করা হয় মান সেট বা ফেরানোর জন্য যার দ্বারা ব্যাকগ্রাউন্ড ইমেজ এরিয়া উপাদান বর্ডার বক্সকে প্রসারিত করে। উপরের, বাম, ডান এবং নীচের জন্য মান ব্যবহার করে আমরা উপাদানটির সংশ্লিষ্ট সীমানা থেকে পটভূমি চিত্রটি কতটা প্রসারিত হবে তা নির্দিষ্ট করতে পারি।
সিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলবর্ডারImageOutset প্রপার্টি −
সেট করা হচ্ছেobject.style.borderImageOutset = "length|number|initial|inherit"
সম্পত্তি মান নিম্নরূপ ব্যাখ্যা করা হয় −
| মান | বিবরণ |
|---|---|
| দৈর্ঘ্য | ছবিটি সীমানা বাক্স থেকে কতদূর প্রসারিত হবে তা নির্ধারণের জন্য৷ ডিফল্ট মানটি 0 এ সেট করা হয়েছে অর্থাৎ এটি বর্ডার বক্সের বাইরে প্রসারিত হয় না৷ |
| সংখ্যা | সংখ্যার মান নির্ধারণের জন্য যা বর্ডার-প্রস্থের একাধিক। |
| প্রাথমিক | এই প্রপার্টিটিকে প্রাথমিক মান সেট করার জন্য। |
| উত্তরাধিকারী | অভিভাবক সম্পত্তি মান উত্তরাধিকার সূত্রে পেতে |
উদাহরণ
চলুন আমরা বর্ডার ইমেজআউটসেট প্রপার্টি −
এর উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<style>
#P1 {
border: 20px solid transparent;
margin: 20px;
border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30
round;
border-image-outset: 5px;
background-color: lightgreen;
}
</style>
<script>
function changeBottomOutset(){
document.getElementById("P1").style.borderImageOutset="20px";
document.getElementById("Sample").innerHTML="The border image outset is now
increased";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<p id="P1"> This is a sample paragraph containing some text. This paragraph is created only for the sake of this example</p>
<p>Change the above div border image outset by clicking the below button</p>
<button onclick="changeBottomOutset()">Change Bottom Outset</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
"চেঞ্জ বর্ডার আউটসেট" বোতামে ক্লিক করলে -
