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

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

โครงสร้าง

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

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

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

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

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

Результат:

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

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

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

css#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 กินพื้นที่ไป):

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

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

Результат:

ดูเพิ่มเติม