คุณสมบัติCSS เค้าร่างสไตล์
ตัวอย่าง
กำหนดสไตล์สำหรับเค้าร่าง:
div {outline-style: dotted;}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
เค้าร่างเป็นเส้นที่วาดรอบองค์ประกอบ นอกเส้นขอบ เพื่อทำให้องค์ประกอบ "โดดเด่น"
คุณสมบัติoutline-styleระบุรูปแบบของเค้าร่าง
| ค่าเริ่มต้น: | ไม่มี |
|---|---|
| รับการถ่ายทอด: | ไม่ |
| เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
| รุ่น: | CSS2 |
| ไวยากรณ์ JavaScript: | วัตถุ .style.outlineStyle="dash" |
เคล็ดลับและหมายเหตุ
หมายเหตุ:โครงร่างแตกต่างจากเส้นขอบ ! ต่างจากเส้นขอบตรงที่เค้าร่างถูกวาดนอกเส้นขอบขององค์ประกอบ และอาจทับซ้อนกับเนื้อหาอื่นๆ นอกจากนี้ โครงร่างไม่ได้เป็นส่วนหนึ่งของมิติข้อมูลขององค์ประกอบ ความกว้างและความสูงทั้งหมดขององค์ประกอบจะไม่ได้รับผลกระทบจากความกว้างของโครงร่าง
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
ไวยากรณ์ CSS
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
มูลค่าทรัพย์สิน
| Value | Description | Play it |
|---|---|---|
| none | Specifies no outline. This is default | |
| hidden | Specifies a hidden outline | |
| dotted | Specifies a dotted outline | |
| dashed | Specifies a dashed outline | |
| solid | Specifies a solid outline | |
| double | Specifies a double outliner | |
| groove | Specifies a 3D grooved outline. The effect depends on the outline-color value | |
| ridge | Specifies a 3D ridged outline. The effect depends on the outline-color value | |
| inset | Specifies a 3D inset outline. The effect depends on the outline-color value | |
| outset | Specifies a 3D outset outline. The effect depends on the outline-color value | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
โครงร่างเส้นประ:
div {outline-style: dashed;}
ตัวอย่าง
โครงร่างที่มั่นคง:
div {outline-style: solid;}
ตัวอย่าง
โครงร่างคู่:
div {outline-style: double;}
ตัวอย่าง
โครงร่างร่อง:
div {
outline-style:
groove;
outline-color: coral;
outline-width: 7px;
}
ตัวอย่าง
โครงร่างสันเขา:
div {
outline-style:
ridge;
outline-color: coral;
outline-width: 7px;
}
ตัวอย่าง
โครงร่างสิ่งที่ใส่เข้าไป:
div {
outline-style:
inset;
outline-color: coral;
outline-width: 7px;
}
ตัวอย่าง
โครงร่างเริ่มต้น:
div {
outline-style:
outset;
outline-color: coral;
outline-width: 7px;
}
ตัวอย่าง
กำหนดรูปแบบของเค้าร่างโดยใช้ค่าต่างๆ:
p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS Outline
การอ้างอิง CSS: คุณสมบัติเค้าร่าง
การอ้างอิง HTML DOM: คุณสมบัติ outlineStyle