คุณสมบัติ border-image ใน CSS นั้นค่อนข้างซับซ้อนในตอนแรก ในบทความนี้ เราจะพูดถึงคุณสมบัติของ border-image วิธีการใช้ และคุณลักษณะเฉพาะของมันเมื่อต้องใช้งานในเบราว์เซอร์ต่างๆ
ณ จุดนี้ในการศึกษา CSS ของเรา เราควรรู้ว่าคุณสมบัติชายแดนคืออะไร ในการรีเฟรช เป็นคุณสมบัติที่ใช้การจดชวเลขเพื่อระบุเส้นขอบรอบองค์ประกอบ โดยมีโครงสร้างดังนี้
border: 2px /*width*/ dashed /*style*/ green; /*color*/
เช่นเดียวกับเส้นขอบ คุณสมบัติ border-image เป็นคุณสมบัติชวเลขที่ใช้รูปภาพต้นฉบับเพื่อสร้างเส้นขอบรอบองค์ประกอบ โดยมีโครงสร้างดังนี้
border-image:
url("https://www.placekitten.com/501/700") /*source*/
25% / /*slice*/
70px / /*width*/
2px /*outset*/
stretch; /*repeat*/ - border-image-source:
border-image-source เป็นคุณสมบัติ longhand สำหรับส่วนต้นทางของคุณสมบัติ border-image ใน CSS ใช้ URL ที่มีเส้นทางสัมพันธ์หรือ URL รูปภาพไปยังรูปภาพจริง หรือการไล่ระดับสีบางประเภท
- border-image-slice:
border-image-slice คุณสมบัติเป็นชื่อคุณสมบัติแบบยาวสำหรับส่วนสไลซ์ของคุณสมบัติ border-image มันแบ่งภาพออกเป็นเก้าส่วนที่แตกต่างกัน
โดยค่าเริ่มต้น ตรงกลางจะถูกลบออกเพื่อให้ส่วนที่เหลือของรูปภาพสามารถล้อมรอบองค์ประกอบที่คุณกำลังใช้คุณสมบัติอยู่ คุณสมบัติ border-image-slice สามารถใช้ตัวเลขได้สูงสุดสี่ตัว (เป็น %) เพื่อกำหนดว่าสไลซ์จะอยู่ที่ใด คุณยังสามารถใช้คำว่า เติม หากคุณต้องการใช้ส่วนตรงกลางนั้น
- border-image-width:
เช่นเดียวกับคุณสมบัติ border-width คุณสมบัติ border-image-width ระบุว่าคุณต้องการให้ border-image กว้างแค่ไหน สามารถใช้เปอร์เซ็นต์หรือ rems/ems/px และใช้ตัวเลขได้ถึงสี่ตัว เพื่อให้แต่ละด้านของเส้นขอบมีความกว้างของตัวเองได้
- border-image-outset:
border-image-outset คุณสมบัติกำหนดระยะขอบของรูปภาพจากกล่องเส้นขอบขององค์ประกอบ เพื่อเป็นการเตือนความจำ กล่องเส้นขอบเป็นส่วนหนึ่งของแบบจำลองกล่อง ซึ่งเป็นพื้นที่ระหว่างช่องว่างภายในและระยะขอบ ยิ่งตัวเลขสูงเท่าไรก็ยิ่งอยู่ห่างจากกรอบมากเท่านั้น ต้องใช้ค่าสูงสุดสี่ค่าเพื่อให้แต่ละด้านมีค่าของตัวเองหากจำเป็น
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
- เส้นขอบภาพซ้ำ:
คุณสมบัติ border-image-repeat กำหนดลักษณะการทำงานของแต่ละขอบ (ขอบแต่ละด้านไม่รวมมุมของรูปภาพ) ต้องใช้ถึงสองค่า เมื่อมีการระบุค่าหนึ่งค่า จะใช้กับขอบทั้งหมด และเมื่อระบุค่าสองค่า ค่าแรกจะนำไปใช้กับด้านบนและด้านล่าง ในขณะที่ค่าที่สองใช้กับด้านซ้ายและขวา ค่าสามารถ ยืด , ซ้ำ , รอบ หรือ ช่องว่าง .
นิสัยแปลก ๆ ของเบราว์เซอร์
Firefox และ Safari เป็นเบราว์เซอร์ทั่วไปส่วนใหญ่ที่อนุญาตให้คุณใช้คุณสมบัติแต่ละรายการเพื่อสร้างภาพขอบได้ ใน Chrome คุณสามารถใช้ได้เฉพาะคุณสมบัติชวเลขเท่านั้น และคุณต้องใช้ร่วมกับ border-style คุณสมบัติที่จะบอกเราถึงจุดสูงสุดของเส้นขอบที่เราอยากได้ (ทึบ เส้นประ ฯลฯ) อย่าลืมตรวจสอบสิ่งนี้หากคุณใช้ Chrome และทำงานไม่ถูกต้องสำหรับคุณ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Border Image</title>
<style>
* {
box-sizing: border-box;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 500px;
height: 300px;
margin: 20px;
}
.border-image-box {
/* Below only works in Firefox and Safari*/
border-image-source: url(http://placekitten.com/900/1000);
border-image-slice: 25%;
border-image-width: 70px;
border-image-outset: 2px;
border-image-repeat: round;
padding: 80px;
/* This way will NOT work in Chrome */
}
.border-image-shorthand {
border-style: solid;
border-image:
url(http://placekitten.com/900/1000)
25% /
70px /
2px
round;
padding: 80px;
/* Above works in all browsers. Firefox and Safari you can use the border-image prop without using the border-style property. In Chrome you MUST use the border-style prop in order for the image to show up on the webpage */
}
</style>
</head>
<body>
<div class="border-image-box flex">
This is a box. It's using each of the individual border-image
properties to style
</div>
<div class="border-image-shorthand flex">
This is a box. It's using the border-image shorthand to style
</div>
</body>
</html> ในบทช่วยสอนนี้ เราได้เรียนรู้วิธีใช้คุณสมบัติ border-image เพื่อสร้างเส้นขอบรูปภาพ CSS รอบองค์ประกอบ มันเป็นคุณสมบัติชวเลขซึ่งประกอบด้วย border-image-source, border-image-slice, border-image-width, border-image-outset และ border-image-repeat ในการทำให้สิ่งนี้เข้ากันได้กับเบราว์เซอร์ทั้งหมด ให้ตั้งค่ารูปแบบเส้นขอบเป็นทึบ ก่อนที่คุณจะระบุค่ารูปภาพขอบ
