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

คุณสมบัติ border-image กำหนดภาพ สำหรับเส้นขอบ มันเป็นคุณสมบัติแบบย่อ สำหรับคุณสมบัติ border-image-source, border-image-slice, border-image-repeat, border-image-width และ border-image-outset. โดยที่คุณสมบัติแบบย่อปรากฏใน CSS ก่อนคุณสมบัติย่อย ดังนั้นจึง รองรับในเบราว์เซอร์รุ่นเก่าจำนวนมากกว่า

ไวยากรณ์

selector {
	border-image: url(พาธไปยังภาพ) offset/width/outset repeat;
}

คำอธิบาย

ภาพที่เราต้องการนำมาใช้สำหรับ เส้นขอบ ควรถูกออกแบบเป็นพิเศษ: ภาพขนาดเล็ก 4 อันสำหรับมุม และภาพ 4 อันสำหรับด้าน ตัวอย่างภาพดังกล่าว:

ในกรณีนี้ส่วนกลางถูกปล่อยไว้เป็นสีขาว (เนื่องจากเราไม่ต้องการให้มันไปปรากฏบนพื้นหลังขององค์ประกอบ) ตัวอย่างภาพที่มีการเติมส่วนกลาง:

ค่า slice บอกเบราว์เซอร์ว่า ส่วนใดของภาพที่จะไปเป็นมุม และ ส่วนใดจะเป็นด้าน (และส่วนใดจะเป็นส่วนกลาง) ส่วนที่ไปเป็นมุมมี 4 ส่วน ส่วนที่ไปเป็นด้าน มี 4 ส่วน และอีกหนึ่งส่วน (ส่วนกลาง) จะไปเป็นพื้นหลังขององค์ประกอบ (ไม่จำเป็น, คำหลัก fill)

ภาพถูก "ตัด" ออกเป็นชิ้นๆ ดังนี้: สำหรับค่า slice ระบุค่า ตั้งแต่หนึ่งถึงสี่ค่า มาดูตัวอย่างกัน สมมติว่ามีการระบุค่าต่อไปนี้: 10 20 30 40 (ไม่ระบุหน่วย px เนื่องจากภาพอาจเป็นทั้งแรสเตอร์และเวกเตอร์) ค่า เหล่านี้บอกสิ่งต่อไปนี้: 10 ตัดจากด้านบน, 20 ตัดจากด้านขวา, 30 ตัดจากด้านล่าง, 40 ตัดจากด้านซ้าย ส่วนใดของภาพจะไปเป็นมุมซ้ายบน? มันจะเป็นชิ้นส่วน: 10 จากด้านบน, 40 จากด้านซ้าย ในมุมขวาบน จะเป็น 10 จากด้านบน, 20 จากด้านขวา และเป็นเช่นนี้ต่อๆไป

ส่วนใหญ่มักเป็นภาพสมมาตร (เช่นรูปสี่เหลี่ยมขนมเปียกปูน ด้านบน) และเราต้องการตัดชิ้นส่วนเท่าๆกัน สำหรับมุม ในกรณีเช่นนี้จะระบุเพียงค่าเดียว ซึ่งจะกำหนดระยะห่างเท่ากันทุกด้าน หากต้องการตัดรูปสี่เหลี่ยมขนมเปียกปูนสีส้ม เราจะระบุ slice เป็น 26 (เนื่องจาก รูปสี่เหลี่ยมขนมเปียกปูนสีส้มมีขนาด 26px คูณ 26px) รูปสี่เหลี่ยมขนมเปียกปูนสีเหลืองจะไปอยู่บนเส้น ขอบและสิ่งต่อไปนี้จะเกิดขึ้นกับพวกมัน: พวกมัน อาจถูกยืดออกไปทั้งบล็อกหรือจะถูกทำซ้ำ ไปตามแนวเส้นขอบ (ขึ้นอยู่กับค่า repeat):

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

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	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

ผู้ใช้เบราว์เซอร์รุ่นเก่า (หรือที่ปิดการโหลด ภาพ) จะเห็นกรอบมาตรฐานที่กำหนดไว้ ใน border ดังนั้นจึงสมเหตุสมผลที่จะกำหนดสไตล์ และสีที่เหมาะสมให้กับมัน

ค่า

ค่า	คำอธิบาย
url(พาธไปยังภาพ)	พาธไปยังภาพ ดูรายละเอียดเพิ่มเติมที่ `border-image-source`
offset	บอกเบราว์เซอร์ว่าส่วนใดของภาพจะไปเป็นมุม และส่วนใดจะเป็นด้าน (และส่วนใดจะเป็นส่วนกลาง) ค่าที่เป็นไปได้: ตัวเลข `1` ถึง `4` ตัว \| เปอร์เซ็นต์ `1` ถึง `4` ค่า สามารถระบุคำหลัก `fill` ด้วยช่องว่างคั่น เพิ่มเติมจากตัวเลขหรือเปอร์เซ็นต์ ดูรายละเอียดเพิ่มเติมที่ `border-image-slice`
width	คุณสมบัติควบคุมความกว้างของส่วนที่มองเห็นได้ของกรอบ ทำการปรับขนาด หากค่านี้มากกว่าความกว้างของ `border-width` ภาพกรอบ จะล้ำเข้าไปใต้เนื้อหา ค่าที่เป็นไปได้: หน่วย CSS \| เปอร์เซ็นต์ \| ตัวเลข \| `auto` ดูรายละเอียดเพิ่มเติมที่ `border-image-width`
outset	คุณสมบัติที่น่าสนใจที่ช่วยให้เลื่อนกรอบออกไปนอกขอบเขตขององค์ประกอบได้ ค่าลบไม่ได้รับการรองรับ ค่าที่เป็นไปได้: หน่วย CSS (ยกเว้น % (?)) \| ตัวเลขบวก \| auto ดูรายละเอียดเพิ่มเติมที่ `border-image-outset`
repeat	ระบุวิธีทำซ้ำภาพบนเส้นขอบ (ไม่ใช่บนมุม): ปูหรือยืด ค่าที่เป็นไปได้: `stretch` \| `repeat` \| `round` \| `space` ดูรายละเอียดเพิ่มเติมที่ `border-image-repeat`

ค่าเริ่มต้น: none 100%/1/0 stretch (url(พาธไปยังภาพ) offset/width/outset repeat)

ตัวอย่าง . border-image-repeat: ค่า repeat

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

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

ตัวอย่าง . border-image-repeat: ค่า stretch

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

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

ตัวอย่าง . border-image-repeat: ค่า round

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

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

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

ตัวอย่าง . border-image-repeat: สองคำ

ค่า repeat สำหรับความกว้างและ stretch สำหรับความสูง:

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

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

ตัวอย่าง . ความสอดคล้องของความกว้างภาพกับความกว้างของเส้นขอบ

เพิ่ม border-width เมื่อวางเมาส์เหนือ ขณะที่ความหนาของ border-image ปล่อยไว้เหมือนเดิม รูปสี่เหลี่ยมขนมเปียกปูนจะยืดออกไปทั่วทั้ง เส้นขอบ:

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

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

ตัวอย่าง . border-image-slice

ใช้ภาพอื่น ซึ่งมีชิ้นส่วนต่างกัน ไม่เท่ากัน:

ระบุว่าต้องการตัดส่วนใดออกจากภาพ - 25% 30% 10% 20% การทำงาน เป็นดังนี้: 25% - เบี่ยงจากด้านบน, 30% - เบี่ยง จากด้านขวา, 10% - เบี่ยงจากด้านล่าง, 20% - เบี่ยง จากด้านซ้าย โดยพื้นฐานแล้วด้วยชิ้นส่วนเหล่านี้เราตัด มุมออก มุมซ้ายบนจะเป็น 25% จากด้านบนของภาพ และ 20% จากด้านซ้าย มุม ขวาบนจะเป็น 25% จากด้านบนของภาพ, และ 30% จากด้านขวา และเป็นเช่นนี้ต่อๆไป

นอกจากนี้ หากคุณวางเมาส์เหนือบล็อก คำหลัก fill จะทำงาน และส่วนกลาง ของภาพจะกลายเป็นพื้นหลังของบล็อกเรา:

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

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

ตัวอย่าง

สร้างเส้นขอบแบบไล่ระดับสีด้วย linear-gradient:

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

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

ตัวอย่าง . border-image-width

ตั้งค่า border-image-width เป็น 2 (ภาพเส้นขอบจะใหญ่ขึ้น 2 เท่า เมื่อเทียบกับเส้นขอบเอง) เมื่อวางเมาส์เหนือองค์ประกอบ (26/2 - ระบุหลังจากเครื่องหมายทับ ขณะที่ 26 - นี่คือค่า border-image-slice) โปรดสังเกตว่าเส้นขอบเอง ไม่เพิ่มขึ้น แต่ภาพเส้นขอบ - เพิ่มขึ้น เนื่องจากมันจะล้ำเข้าไปใต้ข้อความ:

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

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

ตัวอย่าง . border-image-outset

ตั้งค่า border-image-outset เป็น 3 เมื่อวางเมาส์เหนือองค์ประกอบ (26/1/2 - ระบุหลังจากเครื่องหมายทับที่สอง ขณะที่ 26 - นี่คือค่า border-image-slice, และ - 1 - border-image-width):

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

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

ดูเพิ่มเติม

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