รูปภาพ CSS3 ชายแดน
ด้วย CSS3 นี้ border-image ของสถานที่ให้คุณสามารถตั้งค่าภาพที่จะนำมาใช้เป็นชายแดนรอบองค์ประกอบ
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
CSS3 border-image ทรัพย์สิน
CSS3 border-image คุณสมบัติที่ช่วยให้คุณระบุภาพที่จะนำมาใช้แทนชายแดนปกติรอบองค์ประกอบ
โรงแรมนี้มีสามส่วน
- ภาพที่จะใช้เป็นพรมแดน
- สถานที่ที่จะหั่นภาพ
- กำหนดว่าส่วนตรงกลางควรจะทำซ้ำหรือยืด
เราจะใช้ภาพต่อไปนี้ (เรียกว่า "/css/border.png"):
border-image สถานที่ให้บริการจะใช้เวลาภาพและชิ้นมันเป็นเก้าส่วนเช่นโอเอกซ์บอร์ด จากนั้นก็วางมุมที่มุมและส่วนตรงกลางมีการทำซ้ำหรือยืดตามที่คุณระบุ
หมายเหตุ: สำหรับ border-image ในการทำงานองค์ประกอบยังต้องการ border ชุดคุณสมบัติ!
ที่นี่ส่วนตรงกลางของภาพที่มีการทำซ้ำเพื่อสร้างชายแดน:
ภาพที่เป็นชายแดน!
นี่คือรหัส:
ตัวอย่าง
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
ลองตัวเอง» ที่นี่ส่วนตรงกลางของภาพจะถูกยืดเพื่อสร้างชายแดน:
ภาพที่เป็นชายแดน!
นี่คือรหัส:
ตัวอย่าง
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
ลองตัวเอง»  | แนะนำ: border-image สถานที่ให้บริการเป็นจริงสถานที่ให้บริการจดชวเลขสำหรับ border-image-source , border-image-slice , border-image-width , border-image-outset และ border-image-repeat คุณสมบัติ |
|---|
CSS3 ชายแดนภาพ - ค่า 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;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
} ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 »
คุณสมบัติชายแดน CSS3
| คุณสมบัติ | ลักษณะ |
|---|---|
| border-image | สถานที่ให้บริการจดชวเลขสำหรับการตั้งค่าทั้งหมดที่ border-image-* คุณสมบัติ |
| border-image-source | ระบุเส้นทางไปยังภาพที่จะใช้เป็นเส้นขอบ |
| border-image-slice | ระบุวิธีการตัดภาพชายแดน |
| border-image-width | ระบุความกว้างของภาพชายแดน |
| border-image-outset | ระบุจำนวนเงินที่พื้นที่ภาพชายแดนขยายเกินกล่องชายแดน |
| border-image-repeat | ระบุว่าภาพชายแดนควรจะซ้ำกลมหรือยืด |