คุณสมบัติ outline-offset

คุณสมบัติ outline-offset กำหนดระยะห่าง ของเส้นขอบภายนอก - เส้นขอบที่ไม่ได้ใช้พื้นที่ในเลย์เอาต์ ค่าของคุณสมบัติคือ หน่วยการวัดขนาด ใดๆ ยกเว้นเปอร์เซ็นต์ ค่า เริ่มต้น: 0 ค่าบวกจะดันเส้นขอบออกไปด้านนอกขององค์ประกอบ ค่าลบ - จะดันเข้ามาด้านใน

โครงสร้าง

ตัวเลือก {
	outline-offset: ค่า;
}

ตัวอย่าง . ค่าบวก

เส้นขอบจัดห่างจากองค์ประกอบ (องค์ประกอบถูกเน้นด้วยพื้นหลัง):

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

#elem {
	outline-offset: 5px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

ตัวอย่าง . ค่าลบ

เส้นขอบอยู่ภายในองค์ประกอบ:

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

#elem {
	outline-offset: -10px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

ตัวอย่าง . ค่าลบของ outline ร่วมกับ border

สามารถสร้างเอฟเฟกต์ที่น่าสนใจเช่นนี้ได้ (สังเกต ความหนาของช่องว่างสีขาวระหว่าง เส้นขอบ มีขนาด 10px ไม่ใช่ 14 เนื่องจากส่วนหนึ่งถูก outline ที่มี ความหนา 4px กินพื้นที่ไป):

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

#elem {
	outline-offset: -14px;
	outline: 4px solid green;
	border: 4px solid red;
	width: 300px;
	height: 100px;
}

ดูเพิ่มเติม

คุณสมบัติ outline-width,
ซึ่งกำหนดความหนาของเส้นขอบ
คุณสมบัติ outline-style,
ซึ่งกำหนดรูปแบบของเส้นขอบ
คุณสมบัติ outline-color,
ซึ่งกำหนดสีของเส้นขอบ
คุณสมบัติ outline,
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับเส้นขอบ