คุณสมบัติโครงร่างสี CSS
ตัวอย่าง
กำหนดสีสำหรับโครงร่าง:
div {outline-color: coral;}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
เค้าร่างเป็นเส้นที่วาดรอบองค์ประกอบ นอกเส้นขอบ เพื่อทำให้องค์ประกอบ "โดดเด่น"
คุณสมบัติoutline-color
ระบุสีของเค้าร่าง
หมายเหตุ:ประกาศ คุณสมบัติ สไตล์เค้าร่างก่อน
outline-color
คุณสมบัติเสมอ องค์ประกอบต้องมีโครงร่างก่อนที่คุณจะเปลี่ยนสีของมัน
ค่าเริ่มต้น: | กลับด้านหากได้รับการสนับสนุน มิฉะนั้น สีปัจจุบัน |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่ดูคุณสมบัติแต่ละรายการ อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS2 |
ไวยากรณ์ JavaScript: | วัตถุ .style.outlineColor="#FF0000" |
เคล็ดลับและหมายเหตุ
หมายเหตุ:โครงร่างแตกต่างจากเส้นขอบ ! ต่างจากเส้นขอบตรงที่เค้าร่างถูกวาดนอกเส้นขอบขององค์ประกอบ และอาจทับซ้อนกับเนื้อหาอื่นๆ นอกจากนี้ โครงร่างไม่ได้เป็นส่วนหนึ่งของมิติข้อมูลขององค์ประกอบ ความกว้างและความสูงทั้งหมดขององค์ประกอบจะไม่ได้รับผลกระทบจากความกว้างของโครงร่าง
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
outline-color | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
หมายเหตุ:ค่าinvert
นี้ไม่ได้รับการสนับสนุนในเบราว์เซอร์ใด ๆ ยกเว้น Internet Explorer 8
ไวยากรณ์ CSS
outline-color: invert|color|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
invert | Performs a color inversion. This ensures that the outline is visible, regardless of color background. Note: Browsers are not required to support this value. | |
color | Specifies the color of the outline. Look at CSS Color Values for a complete list of possible color values. | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
กำหนดสีสำหรับเค้าร่างด้วยค่า HEX:
div {outline-color: #92a8d1;}
ตัวอย่าง
กำหนดสีสำหรับโครงร่างด้วยค่า RGB:
div {outline-color: rgb(201, 76, 76);}
ตัวอย่าง
กำหนดสีสำหรับเค้าร่างด้วยค่า RGBA:
div {outline-color: rgba(201, 76, 76, 0.3);}
ตัวอย่าง
กำหนดสีสำหรับเค้าร่างด้วยค่า HSL:
div {outline-color: hsl(89, 43%, 51%);}
ตัวอย่าง
กำหนดสีสำหรับเค้าร่างด้วยค่า HSLA:
div {outline-color: hsla(89, 43%, 51%, 0.3);}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS Outline
การอ้างอิง CSS: คุณสมบัติเค้าร่าง
การอ้างอิง HTML DOM: คุณสมบัติ outlineColor