คุณสมบัติเค้าร่าง CSS
ตัวอย่าง
กำหนดโครงร่างรอบองค์ประกอบ <h2> และองค์ประกอบ <div>:
h2 {
outline: 5px dotted green;
}
div.a {
outline: 2px dashed blue;
}
ความหมายและการใช้งาน
เค้าร่างเป็นเส้นที่วาดรอบองค์ประกอบ นอกเส้นขอบ เพื่อทำให้องค์ประกอบ "โดดเด่น"
outline
ทรัพย์สินเป็นทรัพย์สินชวเลขสำหรับ:
- เค้าร่างความกว้าง
- รูปแบบเค้าร่าง (จำเป็น)
- เค้าร่าง-สี
หากละเว้นสีเค้าร่าง สีที่ใช้จะเป็นสีของข้อความ
หมายเหตุ:โครงร่างแตกต่างจากเส้นขอบ ! ต่างจากเส้นขอบตรงที่เค้าร่างถูกวาดนอกเส้นขอบขององค์ประกอบ และอาจทับซ้อนกับเนื้อหาอื่นๆ นอกจากนี้ โครงร่างไม่ได้เป็นส่วนหนึ่งของมิติข้อมูลขององค์ประกอบ ความกว้างและความสูงทั้งหมดขององค์ประกอบจะไม่ได้รับผลกระทบจากความกว้างของโครงร่าง
ค่าเริ่มต้น: | กลับสี กลาง |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่ดูคุณสมบัติแต่ละรายการ อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS2 |
ไวยากรณ์ JavaScript: | วัตถุ .style.outline="#0000FF จุด 5px" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
outline | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
ไวยากรณ์ CSS
outline: outline-width outline-style outline-color|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description |
---|---|
outline-width | Specifies the width of outline |
outline-style | Specifies the style of the outline |
outline-color | Specifies the color of the outline |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS Outline
การอ้างอิง HTML DOM: คุณสมบัติเค้าร่าง