CSS Outline Color
CSS Outline Color
คุณสมบัติoutline-color
นี้ใช้เพื่อกำหนดสีของเค้าร่าง
สามารถกำหนดสีได้โดย:
- ชื่อ - ระบุชื่อสี เช่น "แดง"
- HEX - ระบุค่าฐานสิบหก เช่น "#ff0000"
- RGB - ระบุค่า RGB เช่น "rgb(255,0,0)"
- HSL - ระบุค่า HSL เช่น "hsl(0, 100%, 50%)"
- กลับด้าน - ทำการกลับสี (ซึ่งทำให้แน่ใจว่าเค้าร่างสามารถมองเห็นได้ โดยไม่คำนึงถึงพื้นหลังสี)
ตัวอย่างต่อไปนี้แสดงโครงร่างต่างๆ ที่มีสีต่างกัน นอกจากนี้ ให้สังเกตว่าองค์ประกอบเหล่านี้มีขอบสีดำบาง ๆ ภายในโครงร่าง:
โครงร่างสีแดงทึบ
โครงร่างสีน้ำเงินประ
โครงร่างสีเทาเริ่มต้น
ตัวอย่าง
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;
/* red */
}
ค่า RGB
หรือโดยใช้ค่า RGB:
ตัวอย่าง
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /*
red */
}
ค่า HSL
คุณยังสามารถใช้ค่า HSL:
ตัวอย่าง
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%);
/* red */
}
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับค่า HEX, RGB และ HSL ในบทCSS Colors ของเรา