CSS รูปแบบของเขตติด
- หน้าที่แล้ว border-end-start-radius
- หน้าต่อไป border-image-outset
การระบุและการใช้งาน
คุณสมบัติ border-image คือคุณสมบัติย่อยที่ใช้ตั้งค่าคุณสมบัติด้านลงต่อไปนี้:
ถ้าไม่กำหนดค่าจะใช้ค่าเริ่มต้นโดยเริ่มต้น
คำเตือน:ใช้คุณสมบัติ border-image-* ในการทำปุ่มที่เรียบร้อยและสามารถย่อยยื่นได้!
ดูเพิ่มเติมที่
CSS3 ตัวเรียนCSS3 ขอบ
ตัวอย่าง
จัดให้รูปภาพกำหนดขอบรูปของ div อิเลยนท์:
div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
มีตัวอย่างเพิ่มเติมที่ด้านล่างของหน้า。
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 | ว่าควรใช้รูปแบบการทับแผ่ (repeated) ฉีดหรือ บรรจุ (rounded) หรือ ขยาย (stretched) ของขอบรูปภาพของ border? | การทดสอบ |
รายละเอียดเทคโนโลยี
| ค่าเริ่มต้น: | none 100% 1 0 stretch |
|---|---|
| การสืบทอด: | no |
| รุ่น: | CSS3 |
| ระบบการใช้งาน JavaScript: | object.style.borderImage="url(border.png) 30 30 round" |
ตัวอย่างเพิ่มเติม
- ปุ่ม Border-image
- ตัวอย่างนี้แสดงว่าจะทำไมโดยใช้คุณสมบัติ border-image ในการสร้างปุ่ม。
การสนับสนุนโปรแกรมนักท่องเที่ยว
ตัวเลขในตารางชี้ถึงเวอร์ชันบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้ทั้งหมด。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
- หน้าที่แล้ว border-end-start-radius
- หน้าต่อไป border-image-outset
