สีเส้นวงรอบ CSS

สีเส้นวงรอบ CSS

outline-color มีความหมายในการตั้งค่าสีของเส้นวงกลม

สามารถตั้งค่าสีด้วยวิธีต่อไปนี้:

  • name - กำหนดชื่อสี ตามที่กำหนดไว้ ตัวอย่าง "red"
  • HEX - กำหนดค่าเซกซิเดคิลลิเมเตอร์ ตามที่กำหนดไว้ ตัวอย่าง "#ff0000"
  • RGB - กำหนดค่า RGB ตามที่กำหนดไว้ ตัวอย่าง "rgb(255,0,0)"
  • HSL - กำหนดค่า HSL ตามที่กำหนดไว้ ตัวอย่าง "hsl(0, 100%, 50%)"
  • invert - ทำให้สีทิ้งเงา (ให้แน่ใจว่าเส้นวงกลมจะเห็นได้ทั้งหมดไม่ว่าเป็นสีพื้นที่ใด)

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

ขอบเส้นวงกลมที่สีแดงเป็นสายตรง

ขอบเส้นวงกลมที่สีสีน้ำเงินเป็นจุด

ขอบเส้นวงกลมที่สีเงานั้นขาว

ตัวอย่าง

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;
}

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

ค่า HEX

คุณยังสามารถใช้ค่าเซกซิเดคิลลิเมเตอร์ (HEX) กำหนดสีเขลือบนเส้นวงกลม:

ตัวอย่าง

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* สีแดง */
}

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

ค่า RGB

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

ตัวอย่าง

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* สีแดง */
}

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

ค่า HSL

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

ตัวอย่าง

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* สีแดง */
}

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

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

เปลี่ยนสี

ตัวอย่างด้านต่อไปใช้ outline-color: invert，ปฏิสัมพันธ์การเปลี่ยนสี

เปลี่ยนสีเคลื่อนที่ของด้านเส้นรอบล้อม

ตัวอย่าง

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

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