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

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

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

ไวยากรณ์

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

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

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

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

#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:

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

#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;
}

ดูเพิ่มเติม

คุณสมบัติ border-image,
ซึ่งเป็นคำสั่งย่อสำหรับเส้นขอบที่เป็นภาพ
คุณสมบัติ border-image-source,
ซึ่งกำหนดเส้นทางไปยังภาพสำหรับเส้นขอบ
คุณสมบัติ border-image-slice,
ซึ่งแบ่งภาพสำหรับเส้นขอบ
คุณสมบัติ border-image-repeat,
ซึ่งทำซ้ำภาพสำหรับเส้นขอบ
คุณสมบัติ border-image-width,
ซึ่งกำหนดขนาดภาพสำหรับเส้นขอบ