เส้นขอบมีความสำคัญในการออกแบบ/พัฒนาเว็บ เนื่องจากสามารถดึงดูดความสนใจของผู้ใช้หรือแยกเนื้อหาในหน้าเว็บได้ คุณสามารถใช้ชวเลขของเส้นขอบเมื่อต้องการให้เส้นขอบทั้งสี่บนองค์ประกอบ HTML เหมือนกัน
ในทางกลับกัน คุณยังสามารถใช้สีเส้นขอบ ลักษณะเส้นขอบ และคุณสมบัติลองแฮนด์ความกว้างของเส้นขอบเพื่อทำให้ทุกเส้นขอบแตกต่าง/ไม่ซ้ำกัน เมื่อคุณต้องการระบุสีของเส้นขอบ เราจะใช้สีเส้นขอบ ใช้ความกว้างของเส้นขอบเพื่อกำหนดความกว้างของเส้นขอบ และระบุว่าเส้นขอบจะเป็นเส้นประ เส้นคู่ หรือเส้นทึบโดยใช้คุณสมบัติสไตล์เส้นขอบ
คุณยังสามารถกำหนดเป้าหมายแต่ละเส้นขอบได้โดยใช้คุณสมบัติเช่น border-block-start และ border-top
เส้นขอบคู่คือการที่เส้นขนานสองเส้นล้อมรอบองค์ประกอบ HTML ทั้งสองบรรทัดถูกคั่นด้วยช่องว่างที่สามารถปล่อยให้โปร่งใสหรือเติมด้วยรูปภาพหรือสีพื้นหลัง
ตัวอย่างเช่น เราสามารถมีปุ่มสมัคร/เข้าสู่ระบบที่ล้อมรอบด้วยเส้นขอบสองชั้น
ทำไมต้องขอบสองชั้น?
- การแยก: คุณสามารถใช้เส้นขอบคู่เพื่อเพิ่มความสามารถในการอ่านและความสามารถในการสแกนของหน้าเว็บโดยแยกองค์ประกอบ HTML ต่างๆ ตัวอย่างเช่น คุณสามารถมีเส้นขอบคู่เพื่อแยกองค์ประกอบต่างๆ เช่น ส่วนหัว เนื้อหา และส่วนท้ายบนหน้าเว็บ
- ดึงดูดสายตา: คุณสามารถใช้สีที่แตกต่างกัน/ตัดกันบนขอบคู่เพื่อทำให้องค์ประกอบต่างๆ ดึงดูดสายตามากขึ้น
- แสดงลำดับชั้น: คุณสามารถแยกความแตกต่างระหว่างองค์ประกอบที่สำคัญและมีความสำคัญน้อยกว่าบนหน้าเว็บได้อย่างชัดเจนโดยใช้เส้นขอบสองชั้น
- ปรับแต่งได้ง่าย: คุณสามารถสร้างการออกแบบที่เป็นส่วนตัวและไม่ซ้ำใครได้โดยใช้ขอบสองชั้น ตัวอย่างเช่น คุณสามารถเปลี่ยนสีหรือความกว้างของแต่ละบรรทัดได้
- การเน้น: การใช้คุณสมบัติเส้นขอบคู่ คุณสามารถดึงดูดความสนใจไปยังลิงก์หรือปุ่มเฉพาะบนหน้าเว็บ
คุณสามารถใช้วิธีต่อไปนี้เพื่อสร้างเส้นขอบคู่ใน CSS
การใช้คุณสมบัติสไตล์เส้นขอบ
คุณสมบัติ border-style กำหนดสไตล์ของเส้นขอบทั้งสี่ขององค์ประกอบ เราใช้คำหลักคู่เพื่อกำหนดสไตล์ในกรณีนี้ เมื่อเราใช้คำหลักคู่ การเติมอัตโนมัติจะถูกสร้างขึ้นระหว่างเส้นขอบทั้งสอง
เพื่อจุดประสงค์ในการสาธิต เราจะตั้งค่าความกว้างของเส้นขอบเป็น 15px เราจะเลือกสีเส้นขอบของเราเป็นสีแดงและระบุสไตล์ของเส้นขอบเป็นสองเท่า
รหัส HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2> Border Property</h2> </div> </body> </html>
รหัส CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border-width: 15px;
border-color: red;
border-style: double;
}
ผลลัพธ์จะเป็น:
การใช้ฟังก์ชัน linear-gradient()
ฟังก์ชันนี้ตั้งค่าการไล่ระดับสีเชิงเส้นเป็นภาพพื้นหลัง ผลที่ได้คือการเปลี่ยนแปลงทีละน้อยระหว่างสองสีในแนวเส้นตรง เราใช้คำหลักเพื่อทำเครื่องหมายจุดเริ่มต้นของเส้นไล่ระดับสี หากไม่ได้ระบุคำสั่งซื้อ ค่าเริ่มต้นจะอยู่ด้านล่างสุด
รหัสด้านล่างทำให้กล่องของเรามีความกว้างของเส้นขอบ 7px จากนั้นเราสามารถระบุการไล่ระดับสีเชิงเส้นบนคุณสมบัติพื้นหลังของแต่ละด้านของกล่อง
รหัส HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>linear-gradient() function</h2> </div> </body> </html>
รหัส CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}
ผลลัพธ์จะเป็น:
การใช้คุณสมบัติเค้าร่าง
เค้าร่างคือเส้นที่วาดนอกเส้นขอบขององค์ประกอบ สิ่งนี้ทำให้ได้เอฟเฟ็กต์เส้นขอบสองเท่า และเราสามารถใช้โครงร่างและเส้นขอบเดียวได้ เราต้องใช้การชดเชยโครงร่างเพื่อเพิ่มช่องว่างระหว่างคุณสมบัติของเส้นขอบและโครงร่าง
รหัส HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Outline Property</h2> </div> </body> </html>
รหัส CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}
หน้าที่แสดงผลจะปรากฏดังนี้:
การใช้คุณสมบัติ box-shadow
คุณสมบัติ box-shadow เพิ่มเอฟเฟกต์เงารอบ ๆ กรอบขององค์ประกอบ คุณสามารถมีเอฟเฟ็กต์กล่องเงาหลายรายการโดยคั่นด้วยเครื่องหมายจุลภาค เริ่มต้นด้วยการตรวจสอบว่าการตั้งค่าออฟเซ็ตและความเบลอเป็นศูนย์ จากนั้นตั้งค่าเงาให้มีขนาดที่เหมาะสม
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Box Shadow Property</h2> </div> </body> </html>
รหัส CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}
หน้าที่แสดงผลจะปรากฏดังนี้:
การใช้คุณสมบัติคลิปเบื้องหลัง
คุณสมบัติคลิปเบื้องหลังกำหนดว่าพื้นหลังควรขยายภายในองค์ประกอบมากน้อยเพียงใด ส่วนขยายสามารถอยู่ใน border-box, padding-box หรือ content-box
รหัส HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Background-Clip Property</h2> </div> </body> </html>
รหัส CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}
หน้าที่แสดงผลจะปรากฏดังนี้:
การใช้ Pseudo Elements
Pseudo-elements ซึ่งแสดงโดย ::before และ ::after ตัวเลือกช่วยให้นักออกแบบเว็บไซต์กำหนดสไตล์ส่วนต่างๆ ของเอกสาร HTML โดยไม่ต้องเพิ่มมาร์กอัปลงในโค้ด
เราสามารถแสดงวิธีใช้องค์ประกอบหลอกเพื่อสร้างเส้นขอบคู่โดยใช้รหัสนี้:
เอกสาร HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>pseudo property</h2> </div> </body> </html>
ซีเอสเอส
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 150px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
background-color: brown;
}
box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
width: 150px;
height: 100px;
}
หน้าที่แสดงผลจะปรากฏดังนี้:
ตัวอย่างจริงของ CSS สองขอบ
คุณสมบัติ double border CSS ถูกใช้ในหลายเว็บไซต์ คุณต้องรวมคุณสมบัติของ double border กับคุณสมบัติ CSS อื่นๆ เพื่อให้ได้ประโยชน์สูงสุด ต่อไปนี้คือสองตัวอย่างการทำงานของเส้นขอบคู่
ปุ่ม “รถเข็น” ใน Amazon
Amazon เป็นหนึ่งในชื่อที่ใหญ่ที่สุดในพื้นที่อีคอมเมิร์ซ ปุ่มรถเข็นมี CSS สองขอบเพื่อความสวยงามทางสายตาและกระตุ้นให้ผู้ใช้ดำเนินการ
เส้นขอบคู่จะปรากฏขึ้นเมื่อผู้ใช้วางเมาส์เหนือปุ่ม “รถเข็น” เส้นขอบยังมองเห็นได้เมื่อคุณวางเมาส์เหนือเมนูการนำทางของ Amazon
ปุ่ม Mailchimp
Mailchimp เป็นบริการการตลาดผ่านอีเมลที่ช่วยให้ผู้ใช้สร้าง เปิดตัว และติดตามแคมเปญ เว็บไซต์ใช้เอฟเฟกต์เส้นขอบสองเท่าในส่วนต่างๆ ปุ่มลงชื่อสมัครใช้และเข้าสู่ระบบมีขอบสองชั้นเพื่อ ‘สร้าง’ ความรู้สึกเร่งด่วนเมื่อผู้ใช้เรียกดู
ขอบด้านล่างของปุ่มเหล่านี้หนาขึ้นเมื่อผู้ใช้เลื่อนเคอร์เซอร์ผ่านปุ่มเหล่านี้
แนวทางปฏิบัติที่ดีที่สุดเมื่อใช้เอฟเฟ็กต์ CSS แบบสองขอบ
มันง่ายที่จะหลงไหลเมื่อคุณใช้ CSS สองเท่า เป้าหมายสุดท้ายคือเพื่อให้แน่ใจว่าผู้ใช้ไปยังส่วนต่างๆ ได้ง่ายและเน้นพื้นที่หลักในไซต์ของคุณ ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:
- ใช้สไตล์ที่สอดคล้องกัน: หากคุณใช้เส้นขอบคู่ ตรวจสอบให้แน่ใจว่าสไตล์นั้นสอดคล้องกันในทุกองค์ประกอบ ตัวอย่างเช่น สามารถใช้เส้นขอบคู่บนปุ่มนำทาง คำกระตุ้นการตัดสินใจ และปุ่มลงชื่อสมัครใช้/เข้าสู่ระบบ หากเป็นไปได้ ตรวจสอบให้แน่ใจว่าคุณมีสีและความหนาของระยะขอบเท่ากันทั่วทั้งองค์ประกอบที่มีขอบสองชั้น
- ตรวจสอบให้แน่ใจว่าเส้นขอบทั้งสองนี้ทำงานบนอุปกรณ์ต่างๆ ได้: เราอยู่ในโลกที่ผู้คนเรียกดูเว็บไซต์จากสมาร์ทโฟน พีซี และแท็บเล็ต ทดสอบเพื่อให้แน่ใจว่ามีการแสดงเส้นขอบสองครั้งตามที่คาดไว้บนหน้าจอขนาดต่างๆ
- ใช้เท่าที่จำเป็น: คุณอาจถูกล่อลวงให้ใช้เอฟเฟ็กต์ CSS บางตัวมากเกินไปหลังจากค้นพบครั้งแรก อย่างไรก็ตาม double CSS เหมาะกับองค์ประกอบต่างๆ บนหน้าเว็บ ใช้คุณสมบัตินี้ในพื้นที่ที่เพิ่มมูลค่าให้กับการออกแบบเท่านั้น
บทสรุป
เราได้เน้นแนวทางสำคัญที่คุณสามารถใช้เพื่อสร้างเส้นขอบคู่ใน CSS ทางเลือกของแนวทางจะขึ้นอยู่กับสิ่งที่คุณต้องการบรรลุด้วยเส้นขอบคู่และความชอบของคุณ คุณสามารถตัดสินใจได้ว่าจะเลือกใช้รูปแบบเส้นขอบคู่แบบใดแบบหนึ่งหรือหลายอย่างรวมกันในหน้าเดียวกัน
คุณสามารถดูทรัพยากร CSS เหล่านี้เพื่อทำความเข้าใจ Cascading Style Sheets โดยละเอียด
