Hiệu ứng Drop Shadow (Bóng đổ) với CSS Filter (Legacy)

Bộ lọc DropShadow - Microsoft Legacy Filter

Cảnh báo: Filter: DropShadow(...) là **Microsoft proprietary filter (IE 4-9)**, **đã lỗi thời**.

Tham số cũ (chỉ IE)

Tham số	Mô tả
Color	Màu bóng dạng #RRGGBB
OffX	Độ lệch ngang (px). Dương = phải, Âm = trái
OffY	Độ lệch dọc (px). Dương = xuống, Âm = lên
Positive	`1` (mặc định): bóng cho pixel không trong suốt. `0`: bóng cho pixel trong suốt

Thay thế hiện đại: CSS box-shadow / filter: drop-shadow()

1. box-shadow (cho box model)

.box-shadow {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5); /* x-offset y-offset blur-radius color */
  /* Hoặc nhiều bóng */
  box-shadow: 
    2px 2px 4px rgba(0,0,0,0.3),
    -2px -2px 4px rgba(255,255,255,0.5);
}

2. filter: drop-shadow() (cho hình dạng phức tạp, PNG transparent)

.drop-shadow {
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
  /* Theo dõi hình dạng thực của element (kể cả transparent PNG) */
}

So sánh box-shadow vs drop-shadow()

Đặc điểm	box-shadow	filter: drop-shadow()
Hình dạng bóng	Hộp chữ nhật (box)	Theo hình ảnh thực (alpha channel)
Hiệu năng	Tốt hơn (GPU accelerated)	Kém hơn (cần composite layer)
Spread radius	Có (tham số 4)	Không có
Inset	Có (`inset`)	Không

Ví dụ hoàn chỉnh hiện đại

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo { display: inline-block; margin: 20px; }
    
    /* box-shadow cho div vuông */
    .box-shadow {
      width: 150px; height: 150px;
      background: #FF0000;
      box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
    }
    
    /* drop-shadow cho PNG transparent */
    .drop-shadow-img {
      filter: drop-shadow(5px 5px 5px #FF0000);
    }
    
    /* drop-shadow cho text */
    .text-shadow {
      filter: drop-shadow(2px 2px 2px #000000);
      font: 30pt 'Arial Black';
      color: red;
    }
  </style>
</head>
<body>
  <div class="demo box-shadow"></div>
  <img src="logo-transparent.png" alt="Logo" class="demo drop-shadow-img">
  <div class="demo text-shadow">CSS Tutorials</div>
</body>
</html>