CSS3 คุณสมบัติชายแดนภาพ
ตัวอย่าง
กำหนดให้เป็นเส้นขอบรอบ ๆ องค์ประกอบภาพ div ไปนี้:
div
{
-webkit พรมแดนภาพ: URL (border.png) 30 30 รอบ; / * Safari 5 * /
-o พรมแดนภาพ: URL (border.png) 30 30 รอบ; / * โอเปร่า * /
ขอบภาพ: URL (border.png) 30 30 รอบ;
}
{
-webkit พรมแดนภาพ: URL (border.png) 30 30 รอบ; / * Safari 5 * /
-o พรมแดนภาพ: URL (border.png) 30 30 รอบ; / * โอเปร่า * /
ขอบภาพ: URL (border.png) 30 30 รอบ;
}
ลอง»
ในด้านล่างของหน้านี้ตัวอย่างมากขึ้น
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน
ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก
คุณสมบัติ | |||||
---|---|---|---|---|---|
ขอบภาพ | 16.0 4.0 -webkit- | 11.0 | 15.0 3.5 -moz- | 6.0 3.1 -webkit- | 15.0 11.0 -o- |
แอตทริบิวต์คำจำกัดความและคำแนะนำ
คุณสมบัติขอบภาพเป็นที่พักชวเลขใช้เพื่อตั้ง ขอบภาพที่มา , ขอบภาพ Slice , ขอบภาพกว้าง , ขอบภาพเริ่มต้น และ เส้นขอบภาพซ้ำ ค่า
การตั้งค่างดค่าเริ่มต้นของพวกเขา
เคล็ดลับ: การสร้างปุ่มที่ปรับขนาดได้สวยงามโดยใช้ขอบอิมเมจเฉพาะบล็อกคุณสมบัติ *!
เริ่มต้น: | ไม่มี 100% 1 0 ยืด |
---|---|
มรดก: | ไม่ |
เวอร์ชัน: | CSS3 |
ไวยากรณ์ javascript: | วัตถุ .style.borderImage = "URL (border.png)30 30 รอบ" |
ไวยากรณ์
border-image:source slice width outset repeat;
值 | 描述 |
---|---|
border-image-source | 用于指定要用于绘制边框的图像的位置 |
border-image-slice | 图像边界向内偏移 |
border-image-width | 图像边界的宽度 |
border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
border-image-repeat | 这个例子演示了如何创建一个border-image 属性的按钮。 |
ตัวอย่างเพิ่มเติม
ภาพปุ่ม
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างปุ่มแอตทริบิวต์ขอบภาพ
บทความที่เกี่ยวข้อง
กวดวิชา CSS3: CSS3 พรมแดน