คุณสมบัติ borderImageSource ของ HTML DOM Style: แหล่งภาพขอบ

คุณสมบัติ borderImageSource ใช้สำหรับกำหนดหรือดึงค่าแหล่งที่มาของภาพที่จะใช้เป็นขอบขององค์ประกอบ

ไวยากรณ์ (Syntax)

object.style.borderImageSource = "none|url('image-path')|initial|inherit"

ค่าที่รองรับ

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 {
    width: 400px;
    margin: 15px;
    padding: 10px;
    border: 20px solid transparent;
    border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg");
    border-image-slice: 30;
  }
</style>
<script>
  function changeBorderImage() {
    document.getElementById("DIV1").style.borderImageSource = "url('https://www.tutorialspoint.com/images/Swift.png')";
    document.getElementById("Sample").innerHTML = "ภาพขอบถูกเปลี่ยนแล้ว";
  }
</script>
</head>
<body>
<div id="DIV1">นี่คือข้อความตัวอย่างภายใน div</div>
<p>คลิกปุ่มเพื่อเปลี่ยนภาพขอบของ div ด้านบน</p>
<button onclick="changeBorderImage()">เปลี่ยนภาพขอบ</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: ใช้โลโก้ ASP.NET เป็นขอบ
หลัง: ใช้โลโก้ Swift เป็นขอบ

คุณสมบัติ border-image ที่เกี่ยวข้อง

• border-image-slice - ตัดภาพเป็น 9 ส่วน
• border-image-width - ความกว้างภาพขอบ
• border-image-outset - ขยายพื้นที่ขอบ
• border-image-repeat - ทำซ้ำภาพ (stretch, repeat, round, space)
• border-image - Shorthand ทั้งหมด

ประเภทภาพที่รองรับ

• Raster: PNG, JPG, GIF, WebP
• Vector: SVG (แนะนำเพราะขยายไม่เสียคุณภาพ)
• CSS Gradients: linear-gradient(), radial-gradient() ฯลฯ

หมายเหตุสำคัญ

• ต้องใช้ url() ครอบเส้นทางภาพเสมอ
• ต้องมี border-style ไม่ใช่ none และ border-width > 0
• ภาพจะถูกตัดตาม border-image-slice (ค่าเริ่มต้น 100% = ใช้ภาพทั้งใบ)
• ใช้ border-image-slice: 30 fill เพื่อแสดงส่วนกลางของภาพ