คุณสมบัติ border-image-slice

คุณสมบัติ border-image-slice กำหนดให้ เบราว์เซอร์ว่าส่วนใดของภาพจะใช้สำหรับ มุม และส่วนใดสำหรับด้านข้าง (และส่วนใด จะเป็นส่วนกลาง) สำหรับมุมใช้ 4 ส่วน สำหรับด้านข้างใช้ 4 ส่วน และหนึ่ง ส่วน (ส่วนกลาง) ใช้สำหรับพื้นหลังขององค์ประกอบ (เป็นตัวเลือก, คำสำคัญ fill)

สำหรับข้อมูลเพิ่มเติมโปรดดูคุณสมบัติ border-image

ไวยากรณ์

<+css+> ตัวเลือก { border-image-slice: จาก 1 ถึง 4 ตัวเลข | จาก 1 ถึง 4 เปอร์เซ็นต์; } <-css->

กับตัวเลขและเปอร์เซ็นต์สามารถมี คำสำคัญ fill คั่นด้วยช่องว่าง

ค่า

ค่า	คำอธิบาย
เปอร์เซ็นต์	เปอร์เซ็นต์คำนวณจากขนาดของภาพ แนวนอนสัมพันธ์กับความกว้าง แนวตั้งสัมพันธ์กับความสูง
ตัวเลข	ตัวเลขคือพิกเซล (สำหรับภาพแรสเตอร์) หรือพิกัด (สำหรับภาพเวกเตอร์) ไม่ต้องระบุหน่วยวัด
`fill`	พฤติกรรมเริ่มต้นคือการทิ้งส่วนกลางของ ภาพ หากต้องการใช้ส่วนนี้ ต้องใช้คำสำคัญ `fill` ร่วมกับ ตัวเลขหรือเปอร์เซ็นต์

จำนวนพารามิเตอร์

การออฟเซ็ตสามารถรับ 1, 2, 3 หรือ 4 พารามิเตอร์ โปรด ทราบว่าหน่วยวัดสำหรับ การออฟเซ็ตไม่ต้องเขียน (เช่น แค่ 20, ไม่ใช่ 20px) และสามารถกำหนดความหนาเป็น % ได้

จำนวนพารามิเตอร์	คำอธิบาย
`1`	ความหนาพร้อมกันทุกด้าน
`2`	1 2; - `1px` สำหรับบนและล่าง, `2px` สำหรับซ้ายและขวา
`3`	`1 2 3`; - `1px` สำหรับบน, `2px` สำหรับซ้ายและขวา, `3px` สำหรับล่าง
`4`	`1 2 3 4`; - `1px` สำหรับบน, `2px` สำหรับขวา, `3px` สำหรับล่าง, `4px` สำหรับซ้าย

ค่าเริ่มต้น: 100%(?)

ตัวอย่าง

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

ตัวอย่าง

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

ดูเพิ่มเติม

คุณสมบัติ border-image,
ซึ่งเป็นคำสั่งย่อสำหรับเส้นขอบภาพ
คุณสมบัติ border-image-source,
ซึ่งกำหนดเส้นทางไปยังภาพสำหรับเส้นขอบ
คุณสมบัติ border-image-repeat,
ซึ่งกำหนดการทำซ้ำภาพสำหรับเส้นขอบ
คุณสมบัติ border-image-width,
ซึ่งกำหนดขนาดภาพสำหรับเส้นขอบ
คุณสมบัติ border-image-outset,
ซึ่งกำหนดการเลื่อนภาพสำหรับเส้นขอบ