เพิ่มเงา (Shadow) ให้อิลิเมนต์ด้วย CSS

ใช้คุณสมบัติ CSS box-shadow เพื่อเพิ่มเงาให้อิลิเมนต์

ตัวอย่างโค้ด

ลองรันโค้ดด้านล่างเพื่อทดสอบ box-shadow property:

<!DOCTYPE html>
<html>
<head>
  <style>
    h2 {
      box-shadow: 10px 10px;
      height: 50px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h2>Heading Two</h2>
  <p>หัวข้อนี้มีเงา</p>
</body>
</html>

คำอธิบาย: box-shadow: 10px 10px ระบุแค่ offset X และ Y (ขวา 10px, ล่าง 10px) ไม่ระบุ blur radius และสี จะใช้ค่าเริ่มต้น: blur = 0 (เงาคม), สี = currentColor (สีตัวอักษร) สามารถเพิ่มได้: box-shadow: 10px 10px 5px 2px rgba(0,0,0,0.3) (offsetX, offsetY, blur, spread, color)