โครงรอย CSS

องค์ประกอบนี้มีขอบเขตดำและขอบเขตสีฟ้า ความกว้าง 10px

โครงรอย CSS

ขอบเขตเป็นเส้นที่วาดรอบองค์ประกอบ นอกขอบเขตของขอบเขต โดยใช้เพื่อเติมหลังเอกสาร

CSS มีคุณสมบัติขอบเขตต่อไปนี้:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

จำเป็นต้องสังเกตขอบเขตขอบเขตต่างกัน! ความต่างคือ: ขอบเขตถูกวาดนอกขอบเขตขององค์ประกอบ และอาจซับซ้อนกับสิ่งอื่น ๆ ในแนวนั้นเช่นกัน ซึ่งขอบเขตไม่ได้เป็นส่วนหนึ่งของขนาดขององค์ประกอบ; ความกว้างและความสูงขององค์ประกอบทั้งหมดไม่ได้รับผลกระทบจากความกว้างของเส้นขอบเขต

รูปแบบขอบเขต CSS

คุณสมบัติ outline-style กำหนดรูปแบบของขอบเขต และสามารถตั้งค่าค่าต่อไปนี้:

  • dotted - กำหนดขอบเขตรุปแบบจุด
  • dashed - กำหนดขอบเขตรุปแบบเส้นติ่ง
  • solid - กำหนดขอบเขตรุปแบบเส้นตรง
  • double - กำหนดขอบเขตรุปแบบเส้นสองสาย
  • groove - กำหนดขอบเขตรุปแบบ 3D รอยเชื่อม
  • ridge - กำหนดขอบเขตรุปแบบ 3D ลูกแบบ
  • inset - กำหนดขอบเขตรุปแบบ 3D ลง
  • outset - กำหนดขอบเขตรุปแบบ 3D ขึ้น
  • none - กำหนดไม่มีขอบเขต
  • hidden - กำหนดขอบเขตที่ซ่อน

ตัวอย่างด้านล่างแสดงค่า outline-style ต่าง ๆ:

ตัวอย่าง

แสดงสไตล์ของขอบเขตต่าง ๆ:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

ผลลัพธ์:

ขอบเส้นจุด

ขอบเส้นแบบยุคยาย

ขอบเส้นตรง

ขอบเส้นสองสาย

ขอบร่อนเรียบเรียง 3D มีขึ้นด้วยค่า outline-color

ขอบร่อนปลายเนื้อหา 3D มีขึ้นด้วยค่า outline-color

ขอบมุมเรียบเรียง 3D มีขึ้นด้วยค่า outline-color

ขอบมุมปลายเนื้อหา 3D มีขึ้นด้วยค่า outline-color

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

จำเป็นต้องสังเกตเว้นแต่จะมีการตั้งค่า outline-style คุณสมบัติ outline-style ไม่มีผลกระทบบางครั้ง ยังไม่มีคุณสมบัติที่เกี่ยวข้อง (ที่จะถูกอธิบายในบทที่ต่อไป) จะมีผล!