ตัวอย่าง
ระบุภาพเป็นชายแดนรอบองค์ประกอบต่อไปนี้:
#borderimg {
-webkit-border-image: url(border.png) 30
round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติชายแดนภาพช่วยให้คุณระบุภาพที่จะนำมาใช้แทนชายแดนปกติรอบองค์ประกอบ
คุณสมบัติขอบภาพเป็นที่พักชวเลขการตั้งค่า เส้นขอบภาพแหล่งที่มา , ขอบภาพ-slice , ขอบภาพกว้าง , ขอบภาพเริ่มต้น และ เส้นขอบภาพซ้ำ คุณสมบัติ
ค่างดถูกตั้งค่าให้เป็นค่าเริ่มต้น
ค่าเริ่มต้น: | none 100% 1 0 stretch |
---|---|
รับการถ่ายทอด: | no |
Animatable: | no. Read about animatable |
เวอร์ชัน: | CSS3 |
ไวยากรณ์ javascript: | object .style.borderImage="url(border.png) 30 round" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
คุณสมบัติ | |||||
---|---|---|---|---|---|
border-image | 16.0 4.0 -webkit- | 11.0 | 15.0 3.5 -moz- | 6.0 3.1 -webkit- | 15.0 11.0 -o- |
หมายเหตุ: โปรดดูการสนับสนุนเบราว์เซอร์ของแต่ละบุคคลสำหรับค่าแต่ละด้านล่าง
CSS ไวยากรณ์
border-image:source slice width outset repeat|initial|inherit;
ค่าทรัพย์สิน
ความคุ้มค่า | ลักษณะ | เล่น |
---|---|---|
border-image-source | เส้นทางไปยังภาพที่จะใช้เป็นเส้นขอบ | |
border-image-slice | วิธีการตัดภาพชายแดน | เล่น " |
border-image-width | ความกว้างของภาพชายแดน | |
border-image-outset | ปริมาณโดยที่พื้นที่ภาพชายแดนขยายเกินกล่องชายแดน | |
border-image-repeat | ไม่ว่าจะเป็นภาพชายแดนควรจะซ้ำกลมหรือยืด | เล่น " |
initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น | |
inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ค่าชิ้นแตกต่างอย่างสิ้นเชิงเปลี่ยนแปลงรูปลักษณ์ของเส้นขอบ:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
}
ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS3: CSS3 ชายแดนรูปภาพ
อ้างอิง CSS: border-image-outset property
อ้างอิง CSS: border-image-repeat property
อ้างอิง CSS: border-image-slice property
อ้างอิง CSS: border-image-source property
อ้างอิง CSS: border-image-width property
อ้างอิง HTML DOM: borderImage property