CSS border-imageคุณสมบัติ
ตัวอย่าง
ระบุรูปภาพเป็นเส้นขอบรอบองค์ประกอบ:
#borderimg {
border-image: url(border.png) 30 round;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติborder-image
ช่วยให้คุณระบุรูปภาพที่จะใช้เป็นเส้นขอบรอบองค์ประกอบ
border-image คุณสมบัติเป็นคุณสมบัติชวเลขสำหรับ:
ค่าที่ละเว้นจะถูกตั้งค่าเป็นค่าเริ่มต้น
ค่าเริ่มต้น: | ไม่มี 100% 1 0 ยืด |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.borderImage="url(border.png) 30 รอบ" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
ตัวเลขตามด้วย -webkit-, -moz- หรือ -o- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
Property | |||||
---|---|---|---|---|---|
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;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
border-image-source | The path to the image to be used as a border | |
border-image-slice | How to slice the border image | |
border-image-width | The width of the border image | |
border-image-outset | The amount by which the border image area extends beyond the border box | |
border-image-repeat | Whether the border image should be repeated, rounded or stretched | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ค่าสไลซ์ต่างๆ จะเปลี่ยนรูปลักษณ์ของเส้นขอบโดยสิ้นเชิง:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS Border Images
การอ้างอิง CSS: border-image-outset คุณสมบัติ
การอ้างอิง CSS: border-image-repeat คุณสมบัติ
การอ้างอิง CSS: border-image-slice คุณสมบัติ
การอ้างอิง CSS: border-image-source property
การอ้างอิง CSS: คุณสมบัติ border-image-width
การอ้างอิง HTML DOM: borderImage คุณสมบัติ