คุณสมบัติ borderImageOutset ของ Style
คุณสมบัติ borderImageOutset ใน HTML DOM ใช้สำหรับตั้งค่าหรือคืนค่าระยะที่พื้นที่รูปภาพพื้นหลัง (background image area) ขยายออกไปจากขอบของกล่อง (border box) โดยใช้ค่าสำหรับ top, left, right, bottom สามารถระบุได้ว่ารูปภาพพื้นหลังจะขยายออกจากขอบแต่ละด้านเท่าไร
ไวยากรณ์ (Syntax)
การกำหนดค่า borderImageOutset
object.style.borderImageOutset = "length|number|initial|inherit"
ค่าของคุณสมบัติ
| ค่า | คำอธิบาย |
|---|---|
| Length | ระบุระยะที่รูปภาพจะขยายจาก border box ค่าเริ่มต้น 0 (ไม่ขยาย) |
| Number | ระบุตัวเลขที่เป็นจำนวนเท่าของ border-width |
| Initial | ตั้งค่าเป็นค่าเริ่มต้น |
| Inherit | สืบทอดค่าจาก parent element |
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการเปลี่ยน borderImageOutset ของย่อหน้า
<!DOCTYPE html>
<html>
<head>
<style>
#P1 {
border: 20px solid transparent;
margin: 20px;
border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30 round;
border-image-outset: 5px;
background-color: lightgreen;
}
</style>
<script>
function changeBottomOutset() {
document.getElementById("P1").style.borderImageOutset = "20px";
document.getElementById("Sample").innerHTML = "The border image outset is now increased";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<p id="P1"> This is a sample paragraph containing some text. This paragraph is created only for the sake of this example</p>
<p>Change the above div border image outset by clicking the below button</p>
<button onclick="changeBottomOutset()">Change Bottom Outset</button>
<p id="Sample"></p>
</body>
</html>
ผลลัพธ์
เริ่มต้น: ย่อหน้ามี border image outset 5px
คลิก Change Bottom Outset: border image outset เพิ่มเป็น 20px รูปภาพขยายออกไปไกลขึ้น
คำอธิบายเพิ่มเติม
border-image-outsetเป็นส่วนหนึ่งของ CSS Border Image Module- ต้องใช้ร่วมกับ
border-image-sourceและborder-image-slice - ค่าสามารถระบุ 1-4 ค่า:
outset(ทุกด้าน),vertical horizontal,top horizontal bottom,top right bottom left - ค่า
numberเป็นตัวคูณของborder-width(เช่น 1 = 1×border-width) - ไม่ส่งผลต่อ layout (ไม่ขยายขนาดกล่อง) - รูปภาพล้นออกมาเท่านั้น
- รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด (IE11+ ต้อง prefix -ms-)
