ใส่เงาให้รูปภาพ HTML ด้วย box-shadow ของ CSS

ใส่เงาให้รูปภาพ HTML ด้วย box-shadow ของ CSS บทความนี้สอนการใช้คำสั่ง box-shadow เพื่อสร้างเงาให้รูปภาพ โดยคำสั่งนี้ใช้สำหรับใส่เงาให้กับวัตถุต่างๆ บนหน้าเว็บไซต์ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง ใส่เงาให้รูปภาพ HTML ด้วย box-shadow ของ CSS

<style>
    .shadow {
        box-shadow: 3px 3px #ccc;
    }
</style>

<img src="https://www.devdit.com/favicon-16x16.png" class="shadow">

ใส่เงาให้รูปภาพ HTML จากตัวอย่างสร้าง class ใน CSS ชื่อ shadow พร้อมคำสั่ง box-shadow: 3px 3px #ccc สามารถอธิบายคำสั่งได้ดังนี้

1. box-shadow คือ คำสั่งใส่เงาให้กับวัตถุ หรือ elements ต่างๆ บนหน้าเว็บไซต์

2. 3px แรก คือ ตำแหน่งเงาแนวนอน ค่าบวกเงาขยับไปทางขวา ค่าลบเงาขยับไปทางซ้าย

3. 3px สอง คือ ตำแหน่งเงานอนตั้ง ค่าบวกเงาขยับลงล่าง ค่าลบเงาขยับขึ้นบน

4. #ccc คือ สีของเงา