borderImage คุณสมบัติใช้สำหรับการตั้งค่าหรือรับภาพเส้นขอบขององค์ประกอบ เป็นคุณสมบัติชวเลข เพื่อให้เราสามารถจัดการคุณสมบัติ borderImageSource, borderImageSlice, borderImageWidth, borderImageOutset และ borderImageRepeat ได้ในครั้งเดียว
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ borderImage -
object.style.borderImage = "source slice width outset repeat|initial|inherit"
คุณค่า
ค่าคุณสมบัติอธิบายได้ดังนี้ -
พี่โน | คุณค่าและคำอธิบาย |
---|---|
1 | borderImageSource ระบุเส้นทางของรูปภาพที่จะใช้เป็นเส้นขอบ |
2 | borderImageSlice ระบุออฟเซ็ตขาเข้าของขอบภาพ |
3 | borderImageWidth ระบุความกว้างขอบภาพ |
4 | borderImageOutset ระบุจำนวนพื้นที่ภาพเส้นขอบที่จะขยายเกินกล่องเส้นขอบ |
5 | borderImageRepeat ระบุว่าขอบภาพควรถูกปัดเศษ ทำซ้ำ หรือยืดออก |
6 | เริ่มต้น สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
7 | สืบทอด เพื่อสืบทอดค่าคุณสมบัติหลัก |
ตัวอย่าง
เรามาดูตัวอย่างคุณสมบัติ borderImage กัน −
<!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>
ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มยุบเส้นขอบ -