home

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

CSS Box Shadow

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

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

CSS Box Shadow

คุณสมบัติ box-shadow เพิ่มเงาให้กับองค์ประกอบ คุณสมบัติ box-shadow สามารถใช้ได้กับองค์ประกอบ HTML เกือบทุกชนิด และคุณสมบัตินี้ยังสามารถใช้กับองค์ประกอบที่มีมุมโค้งมนได้อีกด้วย

ไวยากรณ์สำหรับคุณสมบัติ box-shadow มีดังนี้:

box-shadow: offset-x offset-y blur-radius spread color;

มาแยกย่อยไวยากรณ์นี้และอภิปรายแต่ละองค์ประกอบ:

  • offset-x คือออฟเซ็ตแนวนอนสำหรับเงา (จำเป็น)
  • offset-y คือออฟเซ็ตแนวตั้งสำหรับเงา (จำเป็น)
  • blur-radius เป็นเอฟเฟกต์เบลอที่เพิ่มลงในเงา (ไม่บังคับ)
  • การแพร่กระจายคือรัศมีการแพร่กระจายของเอฟเฟกต์เบลอ (ไม่บังคับ)
  • สีคือสีของเงา (ไม่บังคับ โดยค่าเริ่มต้นคือสีดำ)

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

<html>
<div>
	<p>This is a box.</p>
</div>

องค์ประกอบ HTML ของเรามีลักษณะดังต่อไปนี้:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
 }

นี่คือลักษณะที่กล่องเริ่มต้นของเราปรากฏขึ้น:CSS Box Shadow ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

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

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

กล่องของเรากว้าง 100px และสูง 200px เนื้อหาในกล่องของเรามีช่องว่างภายใน 10px ซึ่งหมายความว่ามีช่องว่าง 10px ระหว่างข้อความในกล่องของเราและเส้นขอบของกล่องของเรา นอกจากนี้กล่องของเรายังเป็นสีฟ้าอ่อน

เงาแนวนอนและแนวตั้ง

เงาพื้นฐานที่สุดที่คุณสามารถสร้างได้ด้วยคุณสมบัติ box-shadow คือเงาแนวนอนและแนวตั้ง นี่คือตัวอย่างกล่องของเราที่มีเงาแนวนอนและแนวตั้ง:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}

CSS Box Shadow ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในโค้ดของเรา เราได้ระบุแอททริบิวต์ offset-x และ offset-y และตั้งค่าทั้งคู่เป็น 10px สิ่งนี้จะสร้างเงามืดที่เป็นสีดำและชดเชย 10 พิกเซลบนทั้งสองแกน ดังที่คุณเห็นด้านบน

เงาสี

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

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 10px 10px lightgray;
}

CSS Box Shadow ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

กล่องของเราตอนนี้มีเงาสีเทาอ่อน

เอฟเฟกต์เงาเบลอ

แอตทริบิวต์ blur-radius ใช้เพื่อเพิ่มเอฟเฟกต์เบลอให้กับเงา สมมติว่าเราต้องการให้เงาของเรามีภาพเบลอ 3px ซึ่งจะทำให้ภาพเบลอเล็กน้อย เราสามารถใช้รหัสนี้เพื่อกำหนดความเบลอของกล่อง:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 10px 10px 3px lightgray;
}

CSS Box Shadow ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

กล่องนี้คล้ายกับกล่องจากตัวอย่างที่แล้ว แต่ถ้าคุณดูเงาอย่างใกล้ชิด คุณจะเห็นว่าเงานั้นเบลอเล็กน้อย

เอฟเฟกต์การแพร่กระจาย

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

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 10px 10px 5px 5px lightgray;
}

CSS Box Shadow ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในตัวอย่างนี้ เงาของเรายาวกว่าเล็กน้อย นี่เป็นเพราะเงาของเราถูกขยายออกไป 5px เนื่องจากรัศมีการแพร่กระจายที่เราได้กำหนดไว้

ในโค้ดของเรา คุณลักษณะที่เราระบุจะเรียงลำดับดังนี้:

  • ออฟเซ็ต-x
  • ออฟเซ็ต-y
  • เบลอ
  • รัศมี
  • สี

หลายเงา

คุณสมบัติ box-shadow สามารถใช้เพื่อเพิ่มเงาหลายเงาให้กับองค์ประกอบ หากคุณต้องการเพิ่มเงาหลายเงาให้กับองค์ประกอบ คุณสามารถใช้ไวยากรณ์ด้านบนและแยกเงาของคุณออกโดยใช้เครื่องหมายจุลภาค นี่คือไวยากรณ์สำหรับการสร้างเงาหลายอัน:

box-shadow: shadow1, shadow2;

เมื่อคุณทำงานกับเงาหลายเงา ค่าออฟเซ็ตจะต้องแตกต่างกันสำหรับแต่ละเงา มิฉะนั้น เงาของคุณจะทับซ้อนกัน และเฉพาะเงาแรกที่กำหนดชุดค่าออฟเซ็ตเฉพาะเท่านั้นที่จะปรากฏขึ้น

สมมติว่าเราต้องการมีทั้งสีเทาอ่อนและเงาสีชมพูอยู่ด้านหลังกล่องของเรา เราสามารถสร้างเงาเหล่านี้ได้โดยใช้รหัสต่อไปนี้:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
	box-shadow: 5px 5px lightgray, 5px 5px pink;
}

รหัสของเราส่งคืน:

CSS Box Shadow

เงามืด

คำสำคัญที่ใส่เข้าไปสามารถใช้เพื่อทำให้เงาปรากฏขึ้นภายในองค์ประกอบ สมมติว่าเราต้องการให้เงาสีเทาอ่อนปรากฏอยู่ภายในกล่องของเรา เราสามารถทำให้สิ่งนี้เกิดขึ้นได้โดยใช้รหัสต่อไปนี้:

<html>
<div>
	<p>This is a box.</p>
</div>
  
<style>
div {
     height: 100px;
     width: 200px;
     padding: 10px;
     background-color: lightblue;
}
div {
	box-shadow: 10px 10px;
}
div {
box-shadow: 5px 5px lightgray inset;
}

CSS Box Shadow ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

คำสำคัญที่ใส่เข้าไปช่วยให้เราเปลี่ยนเงาของเราจากเงาภายนอกเป็นเงาในดังที่คุณเห็นด้านบน

คุณสมบัติของกล่องเงา

มีหลายแอตทริบิวต์ที่สามารถใช้กับคุณสมบัติ CSS box-shadow นี่คือตารางอ้างอิงของแอตทริบิวต์เหล่านี้:

แอตทริบิวต์ คำอธิบาย
offset-x ออฟเซ็ตของเงาบนแกนนอน (x)
ออฟเซ็ต-y ออฟเซ็ตของเงาบนแกนแนวตั้ง (y)
เบลอ รัศมีความเบลอของเงา
สี สีของเงา
กระจาย รัศมีการแพร่กระจายของเงา
สิ่งที่ใส่เข้าไป เปลี่ยนเงาเป็นเงาภายใน
สืบทอด รับช่วงเงาจากองค์ประกอบหลัก

บทสรุป

คุณสมบัติ CSS box-shadow ใช้เพื่อเพิ่มเอฟเฟกต์เงาให้กับองค์ประกอบ HTML

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