เส้นกรอบและเงากล่อง
เพิ่มเส้นกรอบเมื่อโฟกัสและเอฟเฟกต์เงารอบองค์ประกอบด้วย outline และ box-shadow
เส้นกรอบและเงากล่อง เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
พร็อพเพอร์ตี outline
outline จะวาดเส้นด้านนอกเส้นขอบ โดยไม่ส่งผลต่อการจัดวาง องค์ประกอบรอบข้างจึงไม่เลื่อนตาม รูปแบบย่อจะคล้ายกับ border คือ ความกว้าง รูปแบบ และสี
<button class="focus-demo">Focused Button</button>
outline-offset
outline-offset จะเลื่อนเส้น outline ออกจากขอบเส้นขอบ ค่าบวกจะดันเส้นออกด้านนอก ส่วนค่าลบจะเลื่อนเส้นเข้าไปด้านใน ทำให้เกิดลักษณะเหมือนถูกตัด
<button class="focus-demo">Keyboard-focused Button</button>
outline กับ border
ความแตกต่างที่สำคัญ:
- Outline ไม่ส่งผลต่อการไหลของการจัดวาง
- Outline ไม่สามารถกำหนดแยกเป็นรายด้านได้ (ไม่มี outline-top)
- Outline ไม่จำเป็นต้องเป็นรูปสี่เหลี่ยม (ในบางเบราว์เซอร์จะวาดตามรูปร่างของวงแหวนโฟกัส)
- Outline จะอยู่ด้านนอกเส้นขอบเสมอ
:focus-visible กับ :focus
ควรใช้ :focus-visible สำหรับวงแหวนโฟกัสของแป้นพิมพ์ โดยจะแสดง outline เฉพาะเมื่อได้รับโฟกัสผ่านแป้นพิมพ์ ไม่ใช่การคลิกเมาส์ วิธีนี้ช่วยลดสิ่งรบกวนทางสายตาสำหรับผู้ใช้เมาส์ พร้อมคงการเข้าถึงไว้
<button class="focus-demo">Keyboard focus vs mouse click</button>
พื้นฐานของ box-shadow
box-shadow จะเพิ่มเอฟเฟกต์เงารอบองค์ประกอบ รูปแบบย่อคือ: ออฟเซ็ตแนวนอน ออฟเซ็ตแนวตั้ง รัศมีความเบลอ รัศมีการขยาย และสี
<div class="card">Card with soft shadow</div>
คำอธิบายค่าของ box-shadow
ค่าแต่ละค่าใน box-shadow:
- offset-x: การเลื่อนในแนวนอน (ค่าลบ = ไปทางซ้าย)
- offset-y: การเลื่อนในแนวตั้ง (ค่าลบ = ขึ้นด้านบน)
- blur-radius: ความนุ่มของเงา (0 = คมชัด)
- spread-radius: การขยายหรือย่อขนาดเงา
- color: สีของเงา (แนะนำให้ใช้ RGBA)
<div class="raised">Raised</div>
<div class="deep">Deep</div>
เงาแบบ inset
เพิ่มคีย์เวิร์ด inset เพื่อวาดเงาด้านในองค์ประกอบ ทำให้มีลักษณะเหมือนถูกกดหรือยุบลง
<input class="input focus-demo" type="text" value="Focused input" />
เงาของกล่องหลายชั้น
คั่นเงาหลายชั้นด้วยเครื่องหมายจุลภาค เงาจะซ้อนกันจากด้านหน้าไปด้านหลัง:
<span class="badge">3</span>
box-shadow กับ filter: drop-shadow
box-shadow จะยึดตามรูปร่างของกล่องเท่านั้น ส่วน filter: drop-shadow() จะยึดตามรูปร่างที่แสดงผล รวมถึงส่วนโปร่งใสด้วย จึงเหมาะอย่างยิ่งสำหรับไอคอน PNG ที่มีพื้นหลังโปร่งใส
<div class="icon">★</div>
ระบบระดับความยกนูนด้วย box-shadow
Material Design และระบบลักษณะเดียวกันจะกำหนดระดับเงาหลายระดับเพื่อสื่อถึงความยกนูนทางสายตา ให้จับคู่ตัวแปร CSS กับค่าของเงา:
<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>
การทำให้ box-shadow เคลื่อนไหวอย่างมีประสิทธิภาพ
การทำให้ box-shadow เคลื่อนไหวจะกระตุ้นการวาดใหม่ในทุกเฟรม เพื่อประสิทธิภาพที่ดี ควรทำให้ค่า opacity ขององค์ประกอบเทียมที่เป็นเงาเคลื่อนไหว หรือใช้ filter: drop-shadow() ซึ่งสามารถนำไปประกอบภาพได้
ตรวจสอบอย่างรวดเร็ว
คีย์เวิร์ดใดของ box-shadow ที่ใช้วาดเงาด้านในองค์ประกอบ
สรุปทบทวน
outline จะวาดเส้นด้านนอกเส้นขอบโดยไม่ส่งผลต่อการจัดวาง จึงควรใช้เป็นตัวบ่งชี้โฟกัส box-shadow จะเพิ่มเงาเพื่อสร้างมิติ โดยกำหนดออฟเซ็ต ความเบลอ การขยาย และสี ใช้ inset สำหรับเงาด้านใน และสามารถซ้อนเงาหลายชั้นโดยคั่นด้วยเครื่องหมายจุลภาค
คำถามที่พบบ่อย
บทเรียน “เส้นกรอบและเงากล่อง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เส้นกรอบและเงากล่อง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เส้นกรอบและเงากล่อง”
เพิ่มเส้นกรอบเมื่อโฟกัสและเอฟเฟกต์เงารอบองค์ประกอบด้วย outline และ box-shadow คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “เส้นกรอบและเงากล่อง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ทำความเข้าใจ Width Height Margin และ Padding
- รูปแบบ ความกว้าง และสีเส้นขอบ
- Box-Sizing: Content-Box เทียบกับ Border-Box
- เส้นกรอบและเงากล่อง