CSSbox-shadow đổ bóng theo hình hộp; filter: drop-shadow() đổ bóng theo hình thật của nội dung, kể cả phần trong suốt.
css
.a { box-shadow: 0 4px 12px rgb(0 0 0 / 0.15); } /* bóng hình chữ nhật (theo border-radius) */
.b { filter: drop-shadow(0 4px 12px rgb(0 0 0 / 0.15)); } /* bóng bám theo alpha channel */Khác biệt lộ rõ với PNG trong suốt, SVG icon, hoặc element có clip-path:
css
.badge {
clip-path: polygon(50% 0, 100% 100%, 0 100%); /* hình tam giác */
}
.badge { box-shadow: 0 4px 8px #0003; } /* bóng vẫn HÌNH CHỮ NHẬT — sai */
.badge { filter: drop-shadow(0 4px 8px #0003); } /* bóng hình tam giác — đúng */box-shadow | drop-shadow() | |
|---|---|---|
| Theo hình | hộp + border-radius | alpha channel thật |
spread | có | không |
inset | có | không |
| Nhiều bóng | có | có (nối nhiều drop-shadow()) |
| Chi phí | rẻ hơn | tốn hơn, có thể tạo layer |
Lưu ý: filter tạo stacking context mới và làm position: fixed bên trong neo vào element đó thay vì viewport — dùng cho card bọc modal là gãy layout.
Chọn thế nào: hộp chữ nhật hoặc bo góc → box-shadow. Icon SVG, ảnh trong suốt, hình cắt bằng clip-path → drop-shadow().