CSS border-image-sliceคุณสมบัติ
ตัวอย่าง
ระบุวิธีการสไลซ์รูปภาพเส้นขอบ:
#borderimg {
border-image-slice: 30%;
}
ความหมายและการใช้งาน
คุณสมบัติborder-image-slice
ระบุวิธีการสไล
ซ์ รูปภาพที่ระบุโดย border-image-source รูปภาพจะถูกแบ่งออกเป็นเก้าส่วนเสมอ: สี่มุม สี่ขอบ และตรงกลาง
ส่วน "กลาง" จะถือว่าโปร่งใสทั้งหมด เว้นแต่จะตั้งค่าคีย์เวิร์ดการเติมไว้
เคล็ดลับ:ดูคุณสมบัติborder-imageด้วย (คุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติ border-image-* ทั้งหมด)
ค่าเริ่มต้น: | 100% |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.borderImageSlice="30%" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
ไวยากรณ์ CSS
border-image-slice: number|%|fill|initial|inherit;
หมายเหตุ:คุณสมบัติborder-image-slice
สามารถรับค่าได้ตั้งแต่หนึ่งถึงสี่ค่า หากละค่าที่สี่ ค่านั้นจะเป็นค่าเดียวกับค่าที่สอง หากละเว้นอันที่สามด้วย จะเป็นอันเดียวกับอันแรก หากละเว้นอันที่สองไปด้วย ก็จะเหมือนกับอันแรก
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
number | The number(s) represent pixels for raster images or coordinates for vector images | |
% | Percentages are relative to the height or width of the image | |
fill | Causes the middle part of the image to be displayed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS Border Images
การอ้างอิง CSS: คุณสมบัติ border-image
การอ้างอิง CSS: border-image-outset คุณสมบัติ
การอ้างอิง CSS: border-image-repeat คุณสมบัติ
การอ้างอิง CSS: border-image-source property
การอ้างอิง CSS: คุณสมบัติ border-image-width
การอ้างอิง HTML DOM: borderImageSlice คุณสมบัติ