คุณสมบัติเค้าร่าง CSS

สารบัญ

โครงร่างคือเส้นที่ลากนอกเส้นขอบขององค์ประกอบ

This element has a black border and a green outline with a width of 10px.

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid black;
  outline: #4CAF50 solid 10px;
  margin: auto;  
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of 10px.</p>

</body>
</html>

โครงร่าง CSS

โครงร่างคือเส้นที่ลากรอบๆ องค์ประกอบที่อยู่นอกเส้นขอบ เพื่อทำให้องค์ประกอบนั้น "โดดเด่น"

CSS มีคุณสมบัติเค้าร่างดังต่อไปนี้:

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

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

รูปแบบเค้าร่าง CSS

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

dotted: - กำหนดโครงร่างเส้นประ
dashed: - กำหนดโครงร่างเส้นประ
solid: - กำหนดโครงร่างที่มั่นคง
double: - กำหนดโครงร่างคู่
groove: - กำหนดโครงร่างร่องแบบ 3 มิติ
ridge: - กำหนดโครงร่างแบบ 3D ridged
inset: - กำหนดโครงร่างสิ่งที่ใส่เข้าไปแบบ 3 มิติ
outset: - กำหนดโครงร่างเริ่มต้น 3 มิติ
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;}

ผลลัพธ์ :

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.

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}

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;}
</style>
</head>
<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>
</html>

หมายเหตุ: คุณสมบัติโครงร่างอื่นๆ (ซึ่งคุณจะได้เรียนรู้เพิ่มเติมในบทถัดไป) จะไม่มีผลใดๆ เว้นแต่ class="w3-codespan">outline-style คุณสมบัติถูกตั้งค่าแล้ว!