ตัวอย่าง
ระบุภาพเป็นชายแดนรอบองค์ประกอบต่อไปนี้:
#borderimg
{
border-image-source: url(border.png);
}
ลองตัวเอง» ความหมายและการใช้งาน
คุณสมบัติชายแดนภาพแหล่งที่มาระบุเส้นทางไปยังภาพที่จะนำมาใช้เป็นชายแดน (instead of the normal border around an element)
Tip: หากมีค่าเป็น "none" หรือถ้าภาพไม่สามารถแสดงรูปแบบชายแดนจะถูกนำมาใช้
เคล็ดลับ: นอกจากนี้ยังมองไปที่ ขอบภาพ ของสถานที่ (a shorthand property for setting all the border-image-* properties)
| ค่าเริ่มต้น: | none |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | no. Read about animatable |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | object .style.borderImageSource="url(border.png)" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| border-image-source | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSS ไวยากรณ์
border-image-source: none|image|initial|inherit;ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ |
|---|---|
| none | ไม่มีภาพที่จะนำมาใช้ |
| image | เส้นทางไปยังภาพที่จะใช้เป็นเส้นขอบ |
| initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS3: CSS3 ชายแดนรูปภาพ
CSS อ้างอิง: border-image property
อ้างอิง CSS: border-image-outset property
อ้างอิง CSS: border-image-repeat property
อ้างอิง CSS: border-image-slice property
อ้างอิง CSS: border-image-width property
อ้างอิง HTML DOM: borderImageSource property