เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
ร่างเป็นสายที่ถูกวาดรอบองค์ประกอบ (outside the borders) เพื่อให้องค์ประกอบ "stand out"
สถานที่ให้บริการโครงแบบระบุลักษณะของโครงร่าง
| ค่าเริ่มต้น: | none |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | no. Read about animatable |
| เวอร์ชัน: | CSS2 |
| ไวยากรณ์ javascript: | object .style.outlineStyle="dashed" Try it |
เคล็ดลับและคำอธิบาย
ร่างเป็นสายรอบองค์ประกอบ มันจะแสดงรอบขอบขององค์ประกอบ แต่ก็มีความแตกต่างจากคุณสมบัติชายแดน
สรุปไม่ได้เป็นส่วนหนึ่งของขนาดขององค์ประกอบดังนั้นองค์ประกอบของความกว้างและความสูงคุณสมบัติไม่ได้มีความกว้างของเค้าร่าง
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Note: IE8 สนับสนุนสถานที่ให้บริการโครงร่างรูปแบบเฉพาะในกรณีที่ประเภทเอกสารที่ระบุไว้!
CSS ไวยากรณ์
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ | เล่น |
|---|---|---|
| none | ระบุไม่มีเค้าร่าง นี้จะเริ่มต้น | เล่น " |
| hidden | ระบุร่างที่ซ่อนอยู่ | เล่น " |
| dotted | ระบุร่างประ | เล่น " |
| dashed | ระบุร่างประ | เล่น " |
| solid | ระบุร่างที่เป็นของแข็ง | เล่น " |
| double | ระบุ outliner คู่ | เล่น " |
| groove | ระบุร่าง 3D ร่อง ผลกระทบที่เกิดขึ้นอยู่กับค่าโครงร่างสี | เล่น " |
| ridge | ระบุร่างยับ 3D ผลกระทบที่เกิดขึ้นอยู่กับค่าโครงร่างสี | เล่น " |
| inset | ระบุร่างภาพประกอบ 3 มิติ ผลกระทบที่เกิดขึ้นอยู่กับค่าโครงร่างสี | เล่น " |
| outset | ระบุร่างเริ่มแรก 3D ผลกระทบที่เกิดขึ้นอยู่กับค่าโครงร่างสี | เล่น " |
| initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น | เล่น " |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
การตั้งค่ารูปแบบของร่างโดยใช้ค่าที่แตกต่างกัน:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
CSS Tutorial: CSS Outline
อ้างอิง CSS: outline property
อ้างอิง HTML DOM: outlineStyle property