คุณสมบัติ HTML DOM borderImageSlice ใช้เพื่อกำหนดวิธีแบ่งรูปภาพเส้นขอบออกเป็นภูมิภาค ซึ่งทำได้โดยการระบุการชดเชยรูปภาพขอบเป็นเปอร์เซ็นต์ ตัวเลข หรือค่าส่วนกลาง
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ borderImageSlice -
object.style.borderImageSlice = "number|%|fill|initial|inherit"
อธิบายคุณสมบัติข้างต้นดังนี้ −
| ค่า | คำอธิบาย |
|---|---|
| หมายเลข | ใช้สำหรับแสดงพิกเซลในภาพแรสเตอร์หรือพิกัดเวกเตอร์ในภาพเวกเตอร์ |
| % | ใช้สำหรับระบุออฟเซ็ตแนวนอนและแนวตั้งที่สัมพันธ์กับขนาดรูปภาพ ค่าเริ่มต้นคือ 100% |
| ป่วย | ใช้สำหรับรักษาส่วนตรงกลางของภาพขอบ |
| เริ่มต้น | สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | การสืบทอดค่าคุณสมบัติหลัก |
ให้เราดูตัวอย่างคุณสมบัติ borderImageSlice -
ตัวอย่าง
<!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="The border image slice is now changed";
}
</script>
</head>
<body>
<div id="b1">This is some sample text inside div</div>
<p>Change the above div border image slice…</p>
<button onclick="changeBorderSlice()">Change Border Slice</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
เมื่อคลิกที่ “เปลี่ยนเส้นขอบ” ปุ่ม −
