CSS ระบุborder-image-slice

การระบุและการใช้งาน

คุณสมบัติ border-image-slice กำหนดการเลื่อนภาพของขอบพื้นที่ภาพ

ดูเพิ่มเติม:

สอน CSS3:CSS3 ขอบ

ตัวอย่าง

กำหนดการเลื่อนภาพของขอบพื้นที่ภาพ:

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

ภาษา CSS

border-image-slice: number|%|fill;

หมายเหตุ：คุณสมบัตินี้กำหนดการเลื่อนภาพของขอบพื้นที่ด้านบน, ขวา, ด้านล่าง, ด้านซ้ายของภาพ ซึ่งถูกแบ่งเป็นเก้าส่วน: สี่เขตมุม, สี่ขอบ และส่วนกลางหนึ่ง หากไม่ใช้คำสั่ง fill ส่วนที่อยู่ในกลางของภาพจะถูกทิ้งไป ถ้าละเลยค่าที่สี่ จะใช้ค่าที่สอง ถ้าละเลยค่าที่สาม จะใช้ค่าที่หนึ่ง ถ้าละเลยค่าที่สอง จะใช้ค่าที่หนึ่ง

ค่าคุณสมบัติ

ค่า คำอธิบาย
number ค่าเลขาภาษาต่างๆ ระบุความกว้างของพิกเซล (ถ้าเป็นรูปภาพระบบเซาท์เวิร์ฟ) หรือตัวเครื่องมือ (ถ้าเป็นรูปภาพเวกเตอร์)。
% อัตราส่วนเปอร์เซ็นต์เกี่ยวกับขนาดของรูปภาพ: ความกว้างของรูปภาพส่งผลให้เกิดการเลื่อนตัวระดับนอกเหนือจากตัวอักษร และความสูงส่งผลให้เกิดการเลื่อนตัวตั้งฝั่ง。
fill รักษาส่วนกลางของรูปแบบของเขตขอบพื้นที่。

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น： 100%
เชื่อมโยงต่อ: no
เวอร์ชั่น： CSS3
JavaScript ภาษาไทย： object.style.borderImageSlice="50% 50%"

การสนับสนุนโปรแกรมน่าที่ใช้

ตัวเลขในตารางบอกเล่าถึงเวอร์ชั่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

ดูข้อมูล border-image คุณสมบัติ。