วิธีใช้ CSS box-shadow: 13 เคล็ดลับและตัวอย่าง

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

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

---

---

CSS box-shadow คืออะไร?

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

ไวยากรณ์ CSS:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

1. ออฟเซ็ตแนวนอน: หากออฟเซ็ตแนวนอนเป็นค่าบวก เงาจะอยู่ทางด้านขวาของกล่อง และถ้าออฟเซ็ตแนวนอนเป็นลบ เงาจะอยู่ทางด้านซ้ายของกล่อง
2. ออฟเซ็ตแนวตั้ง: หากออฟเซ็ตแนวตั้งเป็นค่าบวก เงาจะอยู่ใต้กล่อง และหากออฟเซ็ตแนวตั้งเป็นลบ เงาก็จะอยู่เหนือกล่อง
3. รัศมีการเบลอ: ยิ่งค่าสูง เงาก็จะยิ่งเบลอ
4. รัศมีการแพร่กระจาย: แสดงว่าเงาควรแผ่ออกไปมากน้อยเพียงใด ค่าบวกเพิ่มการแพร่กระจายของเงา ค่าลบลดการแพร่กระจาย
5. สี: หมายถึงสีของเงา นอกจากนี้ยังรองรับรูปแบบสีต่างๆ เช่น rgba, hex หรือ hsla

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

1. เพิ่มเงามืดของกล่องไปทางซ้าย ขวา และด้านล่างของกล่อง

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

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

เอาท์พุท:

---

---

2. เพิ่ม Dim box-shadow ให้ทุกด้าน

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

---

---

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

เอาท์พุท:

3. เพิ่มเงากล่องบางที่ด้านล่างและด้านขวา

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

วิธีดาวน์โหลดเพลงฟรี

box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

เอาท์พุท:

4. เพิ่ม Dark box-shadow ให้กับทุกด้าน

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

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

เอาท์พุท:

5. เพิ่ม Spread Shadow ให้ทุกด้าน

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

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

เอาท์พุท:

6. เพิ่มเงาขอบบางให้ทุกด้าน

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

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

เอาท์พุท:

7. เพิ่มกล่องเงาที่ด้านล่างและด้านซ้าย

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

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

เอาท์พุท:

8. เพิ่มกล่องเงามืดที่ด้านบนและด้านซ้าย เงาสีเข้มที่ด้านล่างและด้านขวา

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

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

เอาท์พุท:

9. เพิ่มเงาขอบสีบาง ๆ ให้ทุกด้าน

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

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

เอาท์พุท:

10. เพิ่มเงาเส้นขอบหลายสีที่ด้านล่างและด้านซ้ายของกล่อง

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

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

เอาท์พุท:

วิธีสร้างไฟล์ค้างคาว

11. เพิ่มเงาเส้นขอบหลายสีที่ด้านล่าง

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

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

เอาท์พุท:

12. เพิ่มเงาเส้นขอบหลายสีที่ด้านล่างและด้านขวาของกล่อง

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

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

เอาท์พุท:

13. เพิ่มแสงเงาไปทางซ้ายและขวา กระจายเงาไปที่ด้านล่าง

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

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

เอาท์พุท:

ผสานรวม CSS กับหน้า HTML

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

ที่เกี่ยวข้อง: 11 เครื่องมือที่มีประโยชน์ในการตรวจสอบ ล้าง และเพิ่มประสิทธิภาพไฟล์ CSS

คุณสามารถฝังลงในหน้า HTML หรือแนบเป็นเอกสารแยกต่างหาก มีสามวิธีในการรวม CSS ในเอกสาร HTML:

CSS ภายใน

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

CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

Style 4







CSS แบบอินไลน์

CSS แบบอินไลน์ใช้เพื่อเพิ่มกฎสไตล์ที่ไม่ซ้ำให้กับองค์ประกอบ HTML สามารถใช้กับองค์ประกอบ HTML ผ่านทาง สไตล์ คุณลักษณะ. แอตทริบิวต์ style มีคุณสมบัติ CSS ในรูปแบบ 'คุณสมบัติ: มูลค่า' คั่นด้วยเครื่องหมายอัฒภาค ( ; ).

ที่เกี่ยวข้อง: เรียนรู้วิธีสร้างเว็บไซต์สองมิติด้วย CSS Grid

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

CSS box-shadow

Style 4







CSS ภายนอก

CSS ภายนอกเป็นวิธีที่เหมาะที่สุดในการนำสไตล์ไปใช้กับเอกสาร HTML สไตล์ชีตภายนอกมีกฎของสไตล์ทั้งหมดในเอกสารแยกต่างหาก (ไฟล์ .css) จากนั้นเอกสารนี้จะเชื่อมโยงกับเอกสาร HTML โดยใช้ แท็ก วิธีนี้เป็นวิธีที่ดีที่สุดในการกำหนดและนำสไตล์ไปใช้กับเอกสาร HTML เนื่องจากไฟล์ HTML ที่ได้รับผลกระทบต้องการการเปลี่ยนแปลงเพียงเล็กน้อยในมาร์กอัป ต่อไปนี้คือตัวอย่างที่สาธิตวิธีใช้ CSS ภายนอกกับเอกสาร HTML:

สร้างไฟล์ CSS ใหม่ด้วย the .css ส่วนขยาย. ตอนนี้เพิ่มโค้ด CSS ต่อไปนี้ในไฟล์นั้น:

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

สุดท้าย สร้างเอกสาร HTML และเพิ่มรหัสต่อไปนี้ภายในเอกสารนั้น:

หา iphone ของฉันแสดงตำแหน่งเก่า

CSS box-shadow

Style 4







โปรดทราบว่าไฟล์ CSS เชื่อมโยงกับเอกสาร HTML ผ่าน แท็กและ href คุณลักษณะ.

ทั้งสามวิธีข้างต้น (Internal CSS, Inline CSS และ External CSS) จะแสดงผลลัพธ์เดียวกัน-

ทำให้หน้าเว็บของคุณหรูหราด้วย CSS

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

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

แบ่งปัน แบ่งปัน ทวีต อีเมล 10 ตัวอย่างโค้ด CSS อย่างง่ายที่คุณเรียนรู้ได้ใน 10 นาที

ต้องการความช่วยเหลือเกี่ยวกับ CSS หรือไม่ ลองใช้ตัวอย่างโค้ด CSS พื้นฐานเหล่านี้เพื่อเริ่มต้น จากนั้นนำไปใช้กับหน้าเว็บของคุณเอง

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

• การเขียนโปรแกรม
• ออกแบบเว็บ
• CSS

เกี่ยวกับผู้เขียน ยุวราช จันทรา(60 บทความที่ตีพิมพ์)

Yuvraj เป็นนักศึกษาระดับปริญญาตรีสาขาวิทยาการคอมพิวเตอร์ที่มหาวิทยาลัยเดลี ประเทศอินเดีย เขาหลงใหลเกี่ยวกับ Full Stack Web Development เมื่อไม่ได้เขียน เขากำลังสำรวจความลึกของเทคโนโลยีต่างๆ

เพิ่มเติมจาก Yuvraj Chandra

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก