CSS outline ทางแบบ

การกำหนดและการใช้งาน

outline (โครงรั้ว) คือสายที่วาดรอบองค์ประกอบ ตั้งอยู่นอกขอบเส้นของเส้นขอบ และสามารถใช้เพื่อเน้นองค์ประกอบ

หมายเหตุ：สายโครงรั้วไม่ได้เป็นพื้นที่และไม่เป็นสี่เหลี่ยมจัตุรัส

คุณสมบัติ outline ย่อในการตั้งค่าคุณสมบัติทั้งหมดของลักษณะโครงรั้วในการประกาศเดียว

สามารถตั้งค่าคุณสมบัติดังนี้ในลำดับที่ตามปริมาณ

ถ้าไม่ตั้งค่าค่าใด ๆ ก็ไม่มีปัญหา ตัวอย่างเช่น outline:solid #ff0000; ก็ยังเป็นที่อนุญาต

ดูเพิ่มเติมที่：

ตัวอย่าง CSS：CSS ที่เน้น ลวดลาย

คู่มืออ้างอิง HTML DOM：คุณสมบัติ outline

ตัวอย่าง

ตั้งค่ารูปแบบของขอบ 4 ด้าน：

p
  {
  outline:#00FF00 dotted thick;
  }

ทดลองด้วยตัวเอง

ระบบเขียน CSS

outline: outline-width outline-style outline-color|initial|inherit;

ค่าของคุณสมบัติ

ค่า คำอธิบาย
outline-color กำหนดสีของเส้นขอบ。outline-color ค่าที่อาจมีใน
outline-style กำหนดรูปแบบของเส้นขอบ。outline-style ค่าที่อาจมีใน
outline-width กำหนดความกว้างของเส้นขอบ。outline-width ค่าที่อาจมีใน
inherit กำหนดให้คุณสมบัติ outline ของตัวประกอบต่อไปจากตัวประกอบพ่อของมัน。

รายละเอียดเทคนิค

ค่าเริ่มต้น： invert none medium
ความเป็นทางเลือกที่สืบทอดมา： no
เวอร์ชั่น： CSS2
ระบบเขียนภาษา JavaScript： object.style.outline="#0000FF dotted thin"

ตัวอย่างที่คุณสามารถทดลองด้วยตัวเอง

วาดเส้นรอบชนวนขององค์ประกอบ
ตัวอย่างนี้แสดงวิธีใช้คุณสมบัติ outline ในการวาดเส้นรอบชนวนขององค์ประกอบ。

การสนับสนุนโปรแกรมน่าเชื่อถือ

ตัวเลขในตารางบอกว่าอุปกรณ์เบราเซอร์แรกที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.5 1.2 7.0

หมายเหตุ：ถ้าได้กำหนด !DOCTYPE ให้ IE8 สนับสนุนคุณสมบัติ outline。