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

คุณสมบัติ border-image-width ควบคุม ความกว้างของส่วนที่มองเห็นได้ของเส้นขอบ ปรับขนาด มัน หากค่านี้มากกว่าความกว้างของ border-width, รูปภาพเส้นขอบจะล้ำเข้าไปใต้เนื้อหา

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

ไวยากรณ์

ตัวเลือก {
	border-image-width: หน่วย CSS | เปอร์เซ็นต์ | ตัวเลข | auto;
}

ค่า

ค่า	คำอธิบาย
หน่วย CSS	ค่าใน หน่วย CSS ที่กำหนด
เปอร์เซ็นต์	ค่าเป็นเปอร์เซ็นต์เทียบกับขนาดของ บล็อก ที่กำหนดเส้นขอบให้
ตัวเลข	ค่าตัวเลข ซึ่งจะถูกคูณกับ `border-width`
`auto`	คีย์เวิร์ด หากกำหนดค่านี้ ค่าจะเท่ากับค่าที่สอดคล้องกันของ `border-image-slice` หากไม่มีขนาดที่เหมาะสม จะใช้ค่า `border-width` แทน โดยที่รูปภาพ จะเติมเต็มมุมเส้นขอบทั้งหมด ล้ำเข้าไปใต้เนื้อหา ดูตัวอย่างเพื่อความเข้าใจที่ดีขึ้น

ค่าเริ่มต้น: 1

ตัวอย่าง . ตัวเลข

กำหนดค่า border-image-width เป็น 2 เมื่อเลื่อนเมาส์มาทับองค์ประกอบ ในกรณีนี้ เส้นขอบจะมีขนาด 26px*2 - ใหญ่กว่า 2 เท่า ของความกว้างที่กำหนดใน border-width เส้นขอบจะล้ำเข้าไปใต้ข้อความ (ทำหน้าที่เหมือนพื้นหลัง):

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

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

ตัวอย่าง . เปลี่ยน border-image-repeat เป็น round

ในตัวอย่างก่อนหน้า เมื่อเลื่อนเมาส์มาทับ ในเส้นขอบ จะไม่มีจำนวนรูปทรงขนมเปียกปูนเต็มจำนวน แก้ไข ได้โดยกำหนด border-image-repeat เป็นค่า round:

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

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

ตัวอย่าง . เปอร์เซ็นต์

กำหนดค่า border-image-width เป็น 50% เมื่อเลื่อนเมาส์มาทับองค์ประกอบ ในกรณีนี้ เส้นขอบจะมีขนาด 50% ของขนาด บล็อก (นั่นคือเส้นขอบสองด้าน ด้านขวา และด้านซ้าย จะปกคลุมบล็อกทั้งหมด):

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

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

ตัวอย่าง . เปอร์เซ็นต์

กำหนดค่า border-image-width เป็น 30% เมื่อเลื่อนเมาส์มาทับองค์ประกอบ ในกรณีนี้ เส้นขอบจะมีขนาด 30% ของขนาด บล็อก:

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

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

ตัวอย่าง . พิกเซล

กำหนดค่า border-image-width เป็น 50px เมื่อเลื่อนเมาส์มาทับองค์ประกอบ:

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

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

ตัวอย่าง . ค่า auto

กำหนดค่า border-image-width เป็น auto เมื่อเลื่อนเมาส์มาทับองค์ประกอบ

ก่อนเลื่อนเมาส์มาทับ border-image-width มี ค่า 1 (ค่าเริ่มต้น) ในตัวอย่าง border-width ถูกกำหนดไว้ที่ 52px เป็นพิเศษ และ border-image-slice - เป็นค่า 26 (เอฟเฟกต์ของ auto จะสังเกตเห็นได้ก็ต่อเมื่อ border-width ไม่เท่ากับ border-image-slice) เนื่องจาก border-image-width มีค่า 1 รูปภาพเส้นขอบ จะครอบคลุมความกว้างทั้งหมดของ border-width นั่น คือจะยืดออกเป็น 52px เมื่อเลื่อนเมาส์มาทับ ค่า border-image-width จะถูกตั้งเป็น auto และความกว้างของรูปภาพจะเท่ากับค่า border-image-slice นั่นคือ 26px:

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

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

ดูเพิ่มเติม

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