คุณสมบัติ outline

คุณสมบัติ outline กำหนดสี ประเภท และความหนาของเส้นขอบภายนอก (เส้นขอบที่ ไม่ใช้พื้นที่) ให้ทุกด้านพร้อมกัน แต่ต่างจาก border ตรงที่เส้นขอบแบบนี้ไม่ทำให้องค์ประกอบขยายตัว เป็นคุณสมบัติตัวย่อสำหรับ outline-width, outline-style และ outline-color (แต่ไม่ใช่สำหรับ outline-offset)

ไวยากรณ์

cssตัวเลือก {
  outline: ความหนา ประเภท สี;
}

ลำดับของคุณสมบัติในค่าไม่สำคัญ

ตัวอย่าง . เฉพาะ outline

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

css#elem {
  outline: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

ตัวอย่าง . คุณสมบัติ outline และ border พร้อมกัน

เส้นขอบจาก outline จะอยู่ด้านนอก ส่วนเส้นขอบ จาก border จะอยู่ด้านใน:

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

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

Результат:

ดูเพิ่มเติม