สีโครงร่าง CSS

สารบัญ

สีโครงร่าง CSS

คุณสมบัติ outline-color ใช้เพื่อกำหนดสีของโครงร่าง

สามารถกำหนดสีได้โดย:

ชื่อ - ระบุชื่อสี เช่น "สีแดง"
HEX - ระบุค่าฐานสิบหก เช่น "ff0000"
RGB - ระบุค่า RGB เช่น "rgb(255,0,0)"
HSL - ระบุค่า HSL เช่น "hsl(0, 100%, 50%)"
กลับด้าน - ทำการกลับสี (ซึ่งช่วยให้มั่นใจว่ามองเห็นโครงร่างได้โดยไม่คำนึงถึงสีพื้นหลัง)

ตัวอย่างต่อไปนี้แสดงเค้าร่างที่แตกต่างกันและมีสีต่างกัน โปรดสังเกตด้วยว่าองค์ประกอบเหล่านี้มีขอบสีดำบางๆ อยู่ภายในโครงร่างด้วย:

A solid red outline.

A dotted blue outline.

An outset grey outline.

ตัวอย่าง

p.ex1
{
    border: 2px solid black;	outline-style: solid;
  outline-color: red;
}
p.ex2
{
  border: 2px solid black;	outline-style: dotted;
   
outline-color: blue;
}
p.ex3
{
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The outline-color property is used to set the color of the outline.</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">An outset grey outline.</p>

</body>
</html>

ค่าฐานสิบหก

สีโครงร่างสามารถระบุได้โดยใช้ค่าเลขฐานสิบหก (HEX):

ตัวอย่าง

 p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; 
  /* red */
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: #ff0000; /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: #0000ff; /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: #bbbbbb; /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using a hexadecimal value (HEX):</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

ค่า RGB

หรือโดยใช้ค่า RGB:

ตัวอย่าง

 p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* 
  red */
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: rgb(0, 0, 255); /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: rgb(187, 187, 187); /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using RGB values:</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

ค่า HSL

คุณยังสามารถใช้ค่า HSL:

ตัวอย่าง

 p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); 
  /* red */
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: hsl(240, 100%, 50%); /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: hsl(0, 0%, 73%); /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using HSL values:</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับค่า HEX, RGB และ HSL ได้ในบทสี CSS ของเรา