1. Home
  2. CSS3 คุณสมบัติชายแดนภาพ

บทช่วยสอน CSS3 คุณสมบัติชายแดนภาพ ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ตัวอย่าง,สนับสนุนเบราว์เซอร์,แอตทริบิวต์คำจำกัดความและคำแนะนำ,ไวยากรณ์,ตัวอย่างเพิ่มเติม,บทความที่เกี่ยวข้อง,

CSS3 คุณสมบัติชายแดนภาพ

ตัวอย่าง

กำหนดให้เป็นเส้นขอบรอบ ๆ องค์ประกอบภาพ div ไปนี้:

div
{
-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 พรมแดน

บทแนะนำยอดนิยม

Contact US

CSS3 คุณสมบัติชายแดนภาพ
10/30