เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติชายแดนสไตล์ชุดรูปแบบขององค์ประกอบของเส้นขอบทั้งสี่ คุณสมบัตินี้จะมี 1-4 ค่า
ตัวอย่าง:
- border-style:dotted solid double dashed;
- เส้นขอบด้านบนเป็นจุดที่
- เส้นขอบด้านขวาเป็นของแข็ง
- ขอบด้านล่างเป็นสองเท่า
- ขอบซ้ายเป็นประ
- border-style:dotted solid double;
- เส้นขอบด้านบนเป็นจุดที่
- เส้นขอบซ้ายและขวาเป็นของแข็ง
- ขอบด้านล่างเป็นสองเท่า
- border-style:dotted solid;
- เส้นขอบบนและด้านล่างเป็นจุดที่
- เส้นขอบซ้ายและขวาเป็นของแข็ง
- border-style:dotted;
- ทั้งสี่ชายแดนเป็นจุดที่
| ค่าเริ่มต้น: | none |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | no. Read about animatable |
| เวอร์ชัน: | CSS1 |
| ไวยากรณ์ javascript: | object .style.borderStyle="dotted double" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: ค่า "hidden" ไม่ได้รับการสนับสนุนใน IE7 และก่อนหน้านี้ IE8 ต้องมี! DOCTYPE IE9 และการสนับสนุนในภายหลัง "hidden"
CSS ไวยากรณ์
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ | เล่น |
|---|---|---|
| none | ค่ามาตรฐาน ระบุไม่มีพรมแดน | เล่น " |
| hidden | เช่นเดียวกับ "none" ยกเว้นในการแก้ไขความขัดแย้งชายแดนสำหรับองค์ประกอบของตาราง | เล่น " |
| dotted | ระบุชายแดนประ | เล่น " |
| dashed | ระบุชายแดนประ | เล่น " |
| solid | ระบุชายแดนที่เป็นของแข็ง | เล่น " |
| double | ระบุขอบคู่ | เล่น " |
| groove | ระบุชายแดน 3D ร่อง ผลกระทบที่เกิดขึ้นอยู่กับค่าขอบสี | เล่น " |
| ridge | ระบุชายแดนยับ 3D ผลกระทบที่เกิดขึ้นอยู่กับค่าขอบสี | เล่น " |
| inset | ระบุชายแดนภาพประกอบ 3 มิติ ผลกระทบที่เกิดขึ้นอยู่กับค่าขอบสี | เล่น " |
| outset | ระบุชายแดนเริ่มแรก 3D ผลกระทบที่เกิดขึ้นอยู่กับค่าขอบสี | เล่น " |
| initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น | เล่น " |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ตั้งค่าเส้นขอบที่แตกต่างกันในแต่ละด้านขององค์ประกอบ:
p.one {border-style: dotted solid dashed double;}
p.two {border-style:
dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four
{border-style: dotted;} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS: CSS ชายแดน
อ้างอิง HTML DOM: borderStyle property