คุณสมบัติ border-image-outset

คุณสมบัติ border-image-outset อนุญาตให้เลื่อนเส้นขอบออกไปนอกขอบเขตขององค์ประกอบ ค่าที่ระบุคือตัวเลขที่ไม่มีหน่วยวัด หรือ หน่วยใดๆ สำหรับขนาด ยกเว้นเปอร์เซ็นต์ หากระบุตัวเลขโดยไม่มีหน่วย ตัวเลขนั้นจะทำหน้าที่เป็นตัวคูณที่คูณกับค่าของคุณสมบัติ border-width ไม่รองรับค่าลบ

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับภาพสำหรับเส้นขอบ โปรดดูคุณสมบัติ border-image

ไวยากรณ์

cssตัวเลือก {
  border-image-outset: ตัวเลขบวก;
}

ตัวอย่าง . ตัวเลข

กำหนดค่า border-image-outset เป็น 3 เมื่อวางเมาส์เหนือองค์ประกอบ ขณะนั้นเส้นขอบจะเลื่อนออกไป 26px*3 - ห่างออกไป 3 เท่าของความกว้างของเส้นขอบที่กำหนดใน border-width:

html<div id="elem"></div>

css#elem:hover {
  border-image-outset: 3;
}
#elem {
  border-image-repeat: repeat;
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 100px auto;
}

Результат:

ตัวอย่าง . พิกเซล

กำหนดค่า border-image-outset เป็น 30px เมื่อวางเมาส์เหนือองค์ประกอบ ขณะนั้นเส้นขอบจะเลื่อนออกไป 30px:

html<div id="elem"></div>

css#elem:hover {
  border-image-outset: 30px;
}
#elem {
  border-image-repeat: repeat;
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 50px auto;
}

Результат:

ดูเพิ่มเติม