CSS Outline
เค้าร่างเป็นเส้นที่วาดนอกเส้นขอบขององค์ประกอบ
CSS Outline
เค้าร่างเป็นเส้นที่วาดรอบองค์ประกอบ นอกเส้นขอบ เพื่อทำให้องค์ประกอบ "โดดเด่น"
CSS มีคุณสมบัติเค้าร่างดังต่อไปนี้:
-
outline-style -
outline-color -
outline-width -
outline-offset -
outline
หมายเหตุ:เค้าร่างแตกต่างจากเส้นขอบ ! ต่างจากเส้นขอบตรงที่เค้าร่างถูกวาดนอกเส้นขอบขององค์ประกอบ และอาจทับซ้อนกับเนื้อหาอื่นๆ นอกจากนี้ โครงร่างไม่ได้เป็นส่วนหนึ่งของมิติข้อมูลขององค์ประกอบ ความกว้างและความสูงทั้งหมดขององค์ประกอบจะไม่ได้รับผลกระทบจากความกว้างของโครงร่าง
สไตล์เค้าร่าง CSS
คุณสมบัติoutline-styleระบุลักษณะของเค้าร่าง และสามารถมีค่าใดค่าหนึ่งต่อไปนี้:
dotted- กำหนดโครงร่างประdashed- กำหนดโครงร่างเส้นประsolid- กำหนดโครงร่างที่มั่นคงdouble- กำหนดโครงร่างคู่groove- Defines a 3D grooved outlineridge- Defines a 3D ridged outlineinset- Defines a 3D inset outlineoutset- Defines a 3D outset outlinenone- Defines no outlinehidden- Defines a hidden outline
The following example shows the different outline-style values:
Example
Demonstration of the different outline styles:
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;}
Result:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Note: None of the other outline properties (which you will learn more about in the next chapters) will have ANY effect unless the
outline-style property is set!