รูปภาพ CSS Border
รูปภาพ CSS Border
ด้วยคุณสมบัติ CSS border-imageคุณสามารถตั้งค่ารูปภาพเพื่อใช้เป็นเส้นขอบรอบองค์ประกอบได้
CSS border-image คุณสมบัติ
คุณสมบัติ CSS border-imageช่วยให้คุณระบุรูปภาพที่จะใช้แทนเส้นขอบปกติรอบองค์ประกอบ
ทรัพย์สินมีสามส่วน:
- ภาพที่จะใช้เป็นเส้นขอบ
- จะสไลซ์ภาพที่ไหน
- กำหนดว่าควรทำซ้ำหรือยืดส่วนตรงกลาง
เราจะใช้ภาพต่อไปนี้ (เรียกว่า "border.png"):
สถาน ที่border-imageให้บริการนำรูปภาพและแบ่งมันออกเป็นเก้าส่วน เช่น กระดานโอเอกซ์ จากนั้นวางมุมที่มุม และส่วนตรงกลางจะทำซ้ำหรือยืดออกตามที่คุณระบุ
หมายเหตุ:ในborder-imageการทำงาน องค์ประกอบนั้นต้องการ
borderชุดคุณสมบัติด้วย!
ที่นี่ ส่วนตรงกลางของภาพจะทำซ้ำเพื่อสร้างเส้นขอบ:
ภาพเหมือนชายแดน!
นี่คือรหัส:
ตัวอย่าง
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 round;
}
ที่นี่ ส่วนตรงกลางของรูปภาพถูกยืดออกเพื่อสร้างเส้นขอบ:
ภาพเหมือนชายแดน!
นี่คือรหัส:
ตัวอย่าง
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 stretch;
}
เคล็ดลับ:คุณสมบัติborder-imageเป็นคุณสมบัติชวเลขสำหรับคุณสมบัติ
border-image-source, border-image-slice, border-image-width,
border-image-outset
และborder-image-repeatคุณสมบัติ
CSS border-image - ค่า Slice ที่แตกต่างกัน
ค่าสไลซ์ต่างๆ จะเปลี่ยนรูปลักษณ์ของเส้นขอบโดยสิ้นเชิง:
ตัวอย่างที่ 1:
border-image: url(border.png) 50 รอบ;
ตัวอย่างที่ 2:
border-image: url(border.png) 20% รอบ;
ตัวอย่างที่ 3:
border-image: url(border.png) 30% รอบ;
นี่คือรหัส:
ตัวอย่าง
#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
| Property | Description |
|---|---|
| border-image | A shorthand property for setting all the border-image-* properties |
| border-image-source | Specifies the path to the image to be used as a border |
| border-image-slice | Specifies how to slice the border image |
| border-image-width | Specifies the widths of the border image |
| border-image-outset | Specifies the amount by which the border image area extends beyond the border box |
| border-image-repeat | Specifies whether the border image should be repeated, rounded or stretched |