CSS รายละเอียดการทำนองรูปแบบเขตเข้ม
- ข้างหลัง border-image-outset
- หน้าต่อไป border-image-slice
การนิยามและวิธีใช้
border-image-repeat คุณสมบัติกำหนดว่าภาพขอบเขตควรที่จะถูกทับซ้อน (repeated) ขยาย (stretched) หรือ ทำครอบ (rounded)
ดูเพิ่มเติม:
การเรียนรู้ CSS3:CSS3 ขอบ
ตัวอย่าง
กำหนดวิธีที่จะทับซ้อนภาพของขอบเขต
div { border-image-source: url(border.png); border-image-repeat: round; }
ระบบทางการเขียน CSS
border-image-repeat: stretch|repeat|round;
หมายเหตุ:คุณสมบัตินี้กำหนดวิธีที่จะขยายและปูภาพของเขตขอบเขตและพื้นที่กลาง ดังนั้นคุณสามารถกำหนดค่าสองค่า หากละเมิดค่าที่สอง จะใช้ค่าที่แรก
ค่าคุณสมบัติ
ค่า | คำอธิบาย |
---|---|
stretch | ขยายภาพมาทำครอบบริเวณ |
repeat | ปูภาพทับซ้อน (repeat) มาทำครอบบริเวณ |
round | คล้ายค่า repeat หากไม่สามารถปูภาพออกไปทั้งหมดในบริเวณ ให้ขยายภาพเพื่อให้เข้ากับบริเวณนั้น。 |
รายละเอียดเทคโนโลยี
ค่าเริ่มต้น: | stretch |
---|---|
การสืบทอด: | no |
รุ่น: | CSS3 |
ระบบทางการเขียน JavaScript: | object.style.borderImageRepeat="round" |
การสนับสนุนโปรแกรมนี้
ตัวเลขในตารางบอกว่าคุณสมบัตินี้ได้รับการสนับสนุนอย่างเต็มที่โดยเบราเซอร์ชุดแรก。
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
ดูเพิ่มเติม border-image คุณสมบัติ。
- ข้างหลัง border-image-outset
- หน้าต่อไป border-image-slice