0Pricing
CSS Academy · บทเรียน

รูปแบบ ความกว้าง และสีเส้นขอบ

ใช้เส้นขอบที่มีรูปแบบ ความกว้าง และสีแตกต่างกันด้วยคุณสมบัติแบบย่อและแบบเต็ม

รูปแบบ ความกว้าง และสีเส้นขอบ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

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

ชวเลข border กำหนดเส้นขอบทั้งสี่ด้านพร้อมกัน ได้แก่ ความกว้าง รูปแบบ และสี

<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>

ค่าของรูปแบบเส้นขอบ

ต้องกำหนด border-style ก่อนเส้นขอบจึงจะแสดงผล ค่าที่ใช้ได้มีดังนี้:

  • solid — เส้นต่อเนื่อง
  • dashed — เส้นประยาว
  • dotted — จุดกลม
  • double — เส้นขนานสองเส้น
  • groove/ridge/inset/outset — เอฟเฟกต์สามมิติ
  • none — ไม่มีเส้นขอบ (ค่าเริ่มต้น)

ความกว้างของเส้นขอบ

border-width รับหน่วยความยาวได้ทุกชนิด หรือใช้คีย์เวิร์ด thin, medium, thick หากต้องการความแม่นยำ ให้ใช้ตัวเลข

<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>

สีของเส้นขอบ

border-color รับค่าสี CSS ได้ทุกชนิด รวมถึง RGBA สำหรับความโปร่งใส currentColor จะสืบทอดสีของข้อความ

<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>

เส้นขอบแต่ละด้าน

กำหนดเส้นขอบเฉพาะด้านด้วยคุณสมบัติแบบแยกรายละเอียด:

<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>

การทำมุมมนของเส้นขอบ

border-radius ทำให้มุมขององค์ประกอบมน ใช้ค่าเดียวเพื่อทำให้ทุกมุมมนเท่ากัน หรือใช้สูงสุดสี่ค่าเพื่อควบคุมแต่ละมุมแยกกัน

<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">&#9679;</div>
<div class="custom">Custom</div>

การทำมุมมนแบบวงรีของเส้นขอบ

รัศมีของแต่ละมุมสามารถมีสองค่า คั่นด้วย / เพื่อทำให้มุมมนแบบวงรีไม่สมมาตร:

<div class="leaf"></div>

รูปภาพของเส้นขอบ

border-image แทนที่เส้นขอบด้วยรูปภาพที่แบ่งเป็นส่วน ๆ หรือไล่ระดับสี ทำให้สร้างเส้นขอบตกแต่งได้:

<div class="fancy">Gradient border image</div>

เส้นรอบนอกกับเส้นขอบ

outline วาดเส้นด้านนอกเส้นขอบ ต่างจากเส้นขอบตรงที่ ไม่ส่งผลต่อการจัดวางหรื��ขนาดขององค์ประกอบ โดยมักใช้เป็นตัวบ่งชี้จุดโฟกัสจากแป้นพิมพ์

<button class="focus-demo">Focused Button (demo)</button>

การลบเส้นรอบนอก: ใช้อย่างระมัดระวัง

อย่าลบเส้นรอบนอกของ :focus โดยไม่จัดตัวบ่งชี้จุดโฟกัสที่มองเห็นได้มาแทน การลบรูปแบบจุดโฟกัสส่งผลเสียต่อผู้ใช้แป้นพิมพ์และโปรแกรมอ่านหน้าจอ

<button>Button without outline</button>
<a href="#">Link without outline</a>

การยุบรวมเส้นขอบสำหรับตาราง

สำหรับตาราง HTML ค่า border-collapse: collapse จะรวมเส้นขอบของเซลล์ที่อยู่ติดกันให้เป็นเส้นเดียว ทำให้ดูสะอาดตามากขึ้น

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

ตรวจสอบอย่างรวดเร็ว

คุณสมบัติ CSS ใดวาดเส้นด้านนอกเส้นขอบโดยไม่ส่งผลต่อการจัดวางองค์ประกอบ?

สรุป

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

คำถามที่พบบ่อย

บทเรียน “รูปแบบ ความกว้าง และสีเส้นขอบ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “รูปแบบ ความกว้าง และสีเส้นขอบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบ ความกว้าง และสีเส้นขอบ”

ใช้เส้นขอบที่มีรูปแบบ ความกว้าง และสีแตกต่างกันด้วยคุณสมบัติแบบย่อและแบบเต็ม คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “รูปแบบ ความกว้าง และสีเส้นขอบ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ทำความเข้าใจ Width Height Margin และ Padding
  2. รูปแบบ ความกว้าง และสีเส้นขอบ
  3. Box-Sizing: Content-Box เทียบกับ Border-Box
  4. เส้นกรอบและเงากล่อง
← กลับไปที่ CSS Academy