Thêm bóng đổ (Drop Shadow) cho hình ảnh bằng CSS3

Để thêm bóng đổ cho hình ảnh trong CSS3, sử dụng giá trị drop-shadow cho thuộc tính filter. Nó chấp nhận các tham số sau:

• h-shadow: Giá trị pixel cho bóng ngang (bắt buộc)
• v-shadow: Giá trị pixel cho bóng dọc (bắt buộc). Giá trị âm đặt bóng lên trên hình ảnh
• blur: Thêm hiệu ứng mờ cho bóng (tùy chọn)
• spread: Giá trị dương làm bóng mở rộng, âm làm co lại (tùy chọn)
• color: Màu sắc cho bóng (tùy chọn)

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
  filter: brightness(120%);
  filter: contrast(120%);
  filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Học MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Học MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

Kết quả

Lưu ý: Ví dụ trên áp dụng nhiều filter (brightness, contrast, drop-shadow). Trong thực tế, nên gộp vào một filter: filter: brightness(120%) contrast(120%) drop-shadow(10px 10px 10px green);