home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

CSS Borders:บทช่วยสอนทีละขั้นตอน

คุณสมบัติ CSS border ใช้สำหรับกำหนดเส้นขอบของ HTML องค์ประกอบ คุณสมบัติชวเลขคือ border-width , border-color และ border-style

การเพิ่มเส้นขอบรอบองค์ประกอบบนหน้าเว็บเป็นคุณลักษณะที่สำคัญของการออกแบบเว็บ สามารถใช้เส้นขอบเพื่อแยกเนื้อหาของหน้าเว็บ ทำให้ผู้คนตีความข้อมูลที่แสดงบนหน้าได้ง่ายขึ้น

คุณสมบัติ CSS border ใช้เพื่อกำหนดเส้นขอบขององค์ประกอบ HTML คุณสมบัติ border เป็นการจดชวเลขสำหรับคุณสมบัติย่อยสามคุณสมบัติที่กำหนดสไตล์ สี และความกว้างของเส้นขอบ

ในบทช่วยสอนนี้ เราจะพูดถึงวิธีใช้คุณสมบัติเส้นขอบ CSS และวิธีใช้คุณสมบัติย่อยเพื่อออกแบบเส้นขอบสำหรับองค์ประกอบ HTML ในตอนท้ายของบทช่วยสอนนี้ คุณจะมีความรู้ทั้งหมดที่จำเป็นในการออกแบบเส้นขอบใน CSS

บทนำเกี่ยวกับเส้นขอบใน CSS

ตามที่เราระบุไว้ก่อนหน้านี้ คุณสมบัติ CSS border ใช้เพื่อระบุเส้นขอบรอบองค์ประกอบเว็บ ตัวอย่างเช่น สามารถใช้เส้นขอบรอบรูปภาพ กล่อง หรือเว็บฟอร์ม

คุณสมบัติเส้นขอบเป็นแบบจดชวเลขสำหรับคุณสมบัติย่อยสามคุณสมบัติที่ใช้เพื่อปรับใช้ลักษณะเฉพาะกับเส้นขอบขององค์ประกอบ คุณสมบัติชวเลขคือ:

  • border-width (ระบุความหนาของเส้นขอบ)
  • border-color (ระบุสีของเส้นขอบ)
  • border-style (ระบุรูปแบบของเส้นขอบ)

เมื่อคุณกำหนดเส้นขอบ คุณสามารถใช้ border คุณสมบัติเพื่อระบุเส้นขอบหรือใช้คุณสมบัติย่อยแต่ละรายการ เราจะหารือทั้งสองแนวทางในบทความนี้

คุณสมบัติย่อย CSS Border

ดังที่เราได้กล่าวไว้ก่อนหน้านี้ คุณสมบัติย่อยสามประการที่ใช้ในการกำหนดเส้นขอบใน CSS มาแยกย่อยคุณสมบัติย่อยเหล่านี้และสำรวจตัวอย่างวิธีการทำงานกัน

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

border-style คุณสมบัติใน CSS

คุณสมบัติ border style ใช้เพื่อกำหนดประเภทของเส้นขอบที่จะแสดงบนหน้าเว็บ กล่าวอีกนัยหนึ่ง border-style กำหนดลักษณะของเส้นขอบบนหน้าเว็บ:ทึบ จุด เส้นประ ฯลฯ

มีค่าที่เป็นไปได้ 10 ค่าที่สามารถกำหนดให้กับ border-style คุณสมบัติ. ลักษณะแต่ละสไตล์เหล่านี้จะปรากฏขึ้นเมื่อนำไปใช้กับกล่อง พร้อมด้วยคำอธิบายของแต่ละสไตล์:

CSS Borders:บทช่วยสอนทีละขั้นตอน

โค้ด CSS ที่เราใช้สร้างองค์ประกอบเว็บเหล่านี้มีดังนี้:

.box { border-style: solid; }
.box { border-style: dotted; }
.box { border-style: dashed; }
.box { border-style: double; }
.box { border-style: ridge; }
.box { border-style: groove; }
.box { border-style: inset; }
.box { border-style: outset; }
.box { border-style: none; }
.box { border-style: hidden; }

อย่างที่คุณเห็น ในโค้ดของเรา เราได้ใช้ค่าที่เป็นไปได้แต่ละค่าเพื่อจัดรูปแบบเส้นขอบของเรา

border-width คุณสมบัติใน CSS

border-width คุณสมบัติกำหนดความกว้างของเส้นขอบ CSS ความกว้างของเส้นขอบสามารถกำหนดได้โดยใช้ค่าความยาว CSS (pt , px , em ฯลฯ) หรือโดยใช้ border-width . แบบกำหนดเองหนึ่งในสาม ค่า:thin , medium และ thick .

สมมติว่าเราต้องการสร้าง 5px ขอบทึบรอบกล่อง เราสามารถทำได้โดยใช้รหัสนี้:

<style>
  .box {
	border-style: solid;
	border-width: 5px;
  }
</style>

<html>
  <p class="box">5px thick solid border</p>
</html>

CSS Borders:บทช่วยสอนทีละขั้นตอน ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ดของเรา

เราได้สร้างเส้นขอบที่ใช้รูปแบบทึบและมีความหนา 5px

border-color คุณสมบัติใน CSS

ตามที่คุณคาดหวัง คุณสมบัติสำหรับสีจะระบุสี border-color คุณสมบัติใช้เพื่อกำหนดสีสำหรับเส้นขอบใน CSS ค่าสีที่ border-color ยอมรับ คุณสมบัติคือ:

  • ชื่อ (ชื่อสี เช่น blue )
  • HEX (ค่าสีฐานสิบหก เช่น #000 )
  • HSL (ค่าสี HSL เช่น hsl(10, 100%, 25%) )
  • RGB (ค่าสี RGB เช่น rgb(102, 222, 95) )
  • transparent

สมมติว่าคุณต้องการสร้างกล่องที่มีเส้นขอบสีน้ำเงินประที่มีความกว้าง 5px คุณสามารถทำได้โดยใช้รหัสนี้:

<style>
  .box {
    border-style: dotted;
	border-width: 5px;
	border-color: blue;
  }
</style>

<html>
  <p class="box">5px thick blue dotted border</p>
</html>

CSS Borders:บทช่วยสอนทีละขั้นตอน ในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ดของเรา

คุณสมบัติย่อยหลายค่า

คุณสมบัติย่อยแต่ละรายการสำหรับ CSS border คุณสมบัติสามารถรับได้หลายค่า สิ่งนี้ทำให้คุณสามารถกำหนดเส้นขอบแบบกำหนดเองสำหรับแต่ละขอบขององค์ประกอบใน CSS

ต่อไปนี้คือกฎที่ต้องคำนึงถึงหากคุณต้องการกำหนดเส้นขอบแบบกำหนดเองสำหรับแต่ละขอบขององค์ประกอบใน CSS:

  • หากคุณระบุค่าใดค่าหนึ่ง รูปแบบเส้นขอบจะถูกนำไปใช้กับทุกขอบ
  • หากคุณระบุสองค่า ลำดับต่อไปนี้จะถูกใช้:
    • บนและล่าง ซ้ายและขวา
  • หากคุณระบุสามค่า ลำดับต่อไปนี้จะถูกใช้:
    • บน ขวา และซ้าย ล่าง
  • หากคุณระบุสี่ค่า ลำดับต่อไปนี้จะถูกใช้:
    • บน ขวา ล่าง ซ้าย

สมมติว่าเราต้องการสร้างเส้นขอบที่มีด้านบนและด้านล่างทึบและมีจุดซ้ายและขวา เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:

<style>
  .box { border-style: solid dashed; }
</style>

<html>
  <p class="box">solid top and dashed sides border</p>
</html>

CSS Borders:บทช่วยสอนทีละขั้นตอน ในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ดของเรา

ในโค้ดของเรา เราได้สร้างเส้นขอบแบบผสมผสานโดยระบุลักษณะเส้นขอบสองแบบ องค์ประกอบนี้ใช้รูปแบบเส้นขอบประที่ขอบด้านซ้ายและขวา และรูปแบบทึบที่ด้านบนและด้านล่างขององค์ประกอบ

เราจะใช้วิธีเดียวกันนี้หากต้องการเปลี่ยนสีหรือความกว้างของเส้นขอบ

ชวเลขเส้นขอบ CSS

คุณสมบัติย่อย CSS สามอย่างที่ใช้กำหนดเส้นขอบได้

ในตัวอย่างข้างต้น เราได้กล่าวถึงวิธีการใช้คุณสมบัติย่อยแต่ละอย่างแยกกัน อย่างไรก็ตาม เป็นไปได้ที่จะระบุคุณสมบัติย่อยของเส้นขอบทั้งหมดในคุณสมบัติเดียว ซึ่งจะทำให้เราสามารถย่อโค้ดของเราได้

คุณสมบัติ border ใช้โครงสร้างต่อไปนี้เพื่อกำหนดเส้นขอบ CSS:

  • border-width (ไม่บังคับ)
  • border-style (จำเป็น)
  • border-color (ไม่บังคับ)

สมมติว่าเราต้องการสร้างเส้นขอบสีชมพูทึบขนาด 5px รอบบรรทัดข้อความ เราสามารถทำได้โดยใช้รหัสนี้:

<style>
  .box { border: 5px solid pink };
</style>

<html>
  <p class="box">5px solid pink border</p>
</html>

คลิก CSS Borders:บทช่วยสอนทีละขั้นตอน ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในโค้ดของเรา คุณจะเห็นว่าเราสามารถกำหนดเส้นขอบของเราในหนึ่งบรรทัด แทนที่จะใช้สามบรรทัดและแต่ละคุณสมบัติย่อยของเส้นขอบแต่ละอัน

CSS เส้นขอบส่วนบุคคล

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

  • border-left-[property]
  • border-right-[property]
  • border-top-[property]
  • border-bottom-[property]

ค่าของทรัพย์สินสามารถเป็นได้ทั้ง:

  • style (เพื่อกำหนดรูปแบบของเส้นขอบ)
  • color (เพื่อกำหนดสีของเส้นขอบ)
  • width (เพื่อกำหนดความหนาของเส้นขอบ)
  • ว่างเปล่า (เพื่อใช้ชวเลขเส้นขอบเพื่อกำหนดเส้นขอบ)

คุณสมบัติและค่าต่างๆ ใช้และจดจำได้ง่าย แต่นี่คือรายการชุดค่าผสมของค่าคุณสมบัติย่อยที่เป็นไปได้ทั้งหมด:

  • เส้นขอบด้านซ้ายแบบ
  • เส้นขอบด้านซ้ายสี
  • ความกว้างขอบด้านซ้าย
  • รูปแบบเส้นขอบด้านขวา
  • สีขอบขวา
  • ความกว้างขอบด้านขวา
  • แบบขอบด้านบน
  • สีขอบบน
  • ความกว้างขอบด้านบน
  • แบบขอบด้านล่าง
  • สีขอบล่าง
  • ความกว้างขอบด้านล่าง

สมมติว่าเราต้องการสร้างกล่องข้อความที่มีเส้นขอบทึบทางด้านซ้ายซึ่งมีความกว้าง 2px และเส้นขอบจุดด้านบนกว้าง 5px เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:

<style>
  .box {
	border-left: 2px solid;
	border-top: 5px dotted;
  }
</style>

<html>
  <p class="box">mixed border</p>
</html>

ทางด้านซ้ายของกล่อง เรามีเส้นขอบทึบ 2px ในขณะที่ด้านบนมีเส้นขอบประ 5pc ด้วยการใช้คุณสมบัติของเส้นขอบแต่ละรายการ เราสามารถระบุได้ว่าเส้นขอบควรปรากฏบนแต่ละขอบของกล่องอย่างไร

บทสรุป

border ใช้เพื่อสร้างเส้นขอบใน CSS และมีคุณสมบัติย่อยสามอย่าง ได้แก่ สไตล์ สี และความกว้าง ซึ่งใช้เพื่อปรับแต่งแต่ละส่วนของเส้นขอบแยกกัน

บทช่วยสอนนี้กล่าวถึงด้วยตัวอย่างบางส่วน วิธีใช้คุณสมบัติเส้นขอบ และคุณสมบัติย่อยทั้งหมด 3 รายการเพื่อสร้างเส้นขอบใน CSS นอกจากนี้เรายังสำรวจวิธีจัดสไตล์องค์ประกอบแต่ละด้านโดยใช้คุณสมบัติของเส้นขอบแต่ละส่วน

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเส้นขอบ CSS โปรดดูบทช่วยสอนอื่นๆ ของเราที่อธิบายวิธีการใช้รูปภาพเส้นขอบ การยุบเส้นขอบ เส้นขอบและการชดเชยเค้าร่าง รัศมีเส้นขอบสำหรับมุมมน และเอฟเฟกต์เงาของกล่องที่สวยงาม!