CSS3 border-image Property

ตัวอย่าง

ระบุภาพเป็นชายแดนรอบองค์ประกอบต่อไปนี้:

#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;
}

ลองตัวเอง»