বর্ডার ইমেজ প্রপার্টি একটি এলিমেন্টের বর্ডার ইমেজ সেট বা পাওয়ার জন্য ব্যবহার করা হয়। এটি একটি শর্টহ্যান্ড প্রপার্টি, যাতে আমরা একযোগে বর্ডার ইমেজসোর্স, বর্ডার ইমেজ স্লাইস, বর্ডার ইমেজ ওয়াইডথ, বর্ডার ইমেজআউটসেট এবং বর্ডার ইমেজ রিপিট প্রপার্টি ম্যানিপুলেট করতে পারি।
সিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলবর্ডার ইমেজ প্রপার্টি −
সেট করা হচ্ছেobject.style.borderImage = "source slice width outset repeat|initial|inherit"
মান
সম্পত্তি মান নিম্নরূপ ব্যাখ্যা করা হয় −
| Sr.No | মান ও বর্ণনা |
|---|---|
| 1 | বর্ডার ইমেজ সোর্স এটি একটি সীমানা হিসাবে ব্যবহার করার জন্য চিত্রের পথটি নির্দিষ্ট করে। |
| 2 | borderImageSlice এটি ইমেজ-বর্ডার অভ্যন্তরীণ অফসেটগুলি নির্দিষ্ট করে৷ |
| 3 | borderImageWidth এটি চিত্র-সীমানা প্রস্থ নির্দিষ্ট করে। |
| 4 | borderImageOutset এটি সীমানা চিত্র এলাকার পরিমাণ নির্দিষ্ট করে যার দ্বারা এটি সীমানা বাক্সের বাইরে প্রসারিত হয়। |
| 5 | borderImageRepeat এটি নির্দিষ্ট করে যে চিত্র-সীমানাটি বৃত্তাকার, পুনরাবৃত্তি বা প্রসারিত হওয়া উচিত। |
| 6 | প্রাথমিক এই সম্পত্তি প্রাথমিক মান সেট করার জন্য. |
| 7 | উত্তরাধিকার পিতামাতার সম্পত্তির মান উত্তরাধিকার সূত্রে পাওয়া |
উদাহরণ
বর্ডার ইমেজ প্রপার্টি−
এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<style>
#PARA1 {
border: 15px solid transparent;
padding: 12px;
border-image: url("https://www.tutorialspoint.com/images/blockchain.png") 20 stretch;
width: 100px;
}
</style>
<script>
function changeBorderImage(){
document.getElementById("PARA1").style.borderImage="url('https://www.tutorialspoint.com/im
ages/mongodb.png') 20 round";
document.getElementById("Sample").innerHTML="The border image is now changed";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<p id="PARA1">This is a sample paragraph. Here is another line</p>
<p>Change the above paragraph border image by clicking the below button</p>
<button onclick="changeBorderImage()">Change Border Image</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
কোলাপস বর্ডার বোতামে ক্লিক করলে -
