คุณสมบัติ borderImageSlice ของ HTML DOM Style: การตัดภาพขอบ

คุณสมบัติ borderImageSlice ใช้กำหนดว่าภาพขอบจะถูกตัดแบ่งเป็นพื้นที่อย่างไร โดยระบุ offset จากขอบภาพเป็นเปอร์เซ็นต์, ตัวเลข หรือค่าทั่วไป

ไวยากรณ์ (Syntax)

object.style.borderImageSlice = "number|%|fill|initial|inherit"

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

การทำงานของ border-image-slice (9-slice scaling)

ภาพถูกตัดเป็น 9 ส่วนโดยเส้น 4 เส้น (บน, ขวา, ล่าง, ซ้าย):

• 4 มุม: ไม่ยืดหด (Corner)
• 4 ขอบ: ยืดหด/ทำซ้ำตามความยาว (Edge)
• 1 กลาง: ใช้เป็นพื้นหลังหรือซ่อน (Center) - ต้องใช้ค่า fill

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

<!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 = "การตัดภาพขอบถูกเปลี่ยนเป็น 10% แล้ว";
  }
</script>
</head>
<body>
<div id="b1">นี่คือข้อความตัวอย่างภายใน div</div>
<p>คลิกปุ่มเพื่อเปลี่ยนการตัดภาพขอบของ div ด้านบน</p>
<button onclick="changeBorderSlice()">เปลี่ยนการตัดภาพขอบ</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: ตัดภาพที่ 60% จากขอบ (ส่วนขอบกว้าง)
หลัง: ตัดภาพที่ 10% จากขอบ (ส่วนขอบบาง)

รูปแบบการระบุค่า (1-4 ค่า)

เคล็ดลับ

• ใช้ fill เพื่อแสดงส่วนกลาง: border-image-slice: 30 fill
• ค่า % คำนวณจากขนาดภาพ ไใช่ขนาดองค์ประกอบ
• ร่วมกับ border-image-repeat: round เพื่อไม่ให้ภาพขอบบิดเบี้ยว
• SVG เป็นตัวเลือกดีที่สุดสำหรับ border image