คุณสมบัติความกว้างเค้าร่าง CSS
ตัวอย่าง
กำหนดความกว้างของโครงร่าง:
div {outline-width: thick;}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
เค้าร่างเป็นเส้นที่วาดรอบองค์ประกอบ นอกเส้นขอบ เพื่อทำให้องค์ประกอบ "โดดเด่น"
The outline-width
ระบุความกว้างของเค้าร่าง
หมายเหตุ:ประกาศ คุณสมบัติ สไตล์เค้าร่างก่อน
outline-width
คุณสมบัติเสมอ องค์ประกอบต้องมีโครงร่างก่อนที่คุณจะเปลี่ยนความกว้างขององค์ประกอบ
ค่าเริ่มต้น: | ปานกลาง |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่ดูคุณสมบัติแต่ละรายการ อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS2 |
ไวยากรณ์ JavaScript: | วัตถุ .style.outlineWidth="12px" |
เคล็ดลับและหมายเหตุ
หมายเหตุ:โครงร่างแตกต่างจากเส้นขอบ ! ต่างจากเส้นขอบตรงที่เค้าร่างถูกวาดนอกเส้นขอบขององค์ประกอบ และอาจทับซ้อนกับเนื้อหาอื่นๆ นอกจากนี้ โครงร่างไม่ได้เป็นส่วนหนึ่งของมิติข้อมูลขององค์ประกอบ ความกว้างและความสูงทั้งหมดขององค์ประกอบจะไม่ได้รับผลกระทบจากความกว้างของโครงร่าง
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
outline-width | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
ไวยากรณ์ CSS
outline-width: medium|thin|thick|length|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
medium | Specifies a medium outline. This is default | |
thin | Specifies a thin outline | |
thick | Specifies a thick outline | |
length | Allows you to define the thickness of the outline. Read about length units | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
กำหนดความกว้างของโครงร่างเป็นขนาดกลาง (ซึ่งเป็นค่าเริ่มต้น):
div {outline-width: medium;}
ตัวอย่าง
กำหนดความกว้างของโครงร่างเป็นบาง:
div {outline-width: thin;}
ตัวอย่าง
กำหนดความกว้างของโครงร่างเป็น 1px:
div {outline-width: 1px;}
ตัวอย่าง
กำหนดความกว้างของโครงร่างเป็น 15px:
div {outline-width: 15px;}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS Outline
การอ้างอิง CSS: คุณสมบัติเค้าร่าง
การอ้างอิง HTML DOM: คุณสมบัติ outlineWidth