Hàm số drop-shadow() trong CSS

Định nghĩa và cách sử dụng

CSS drop-shadow() Hàm số lọc áp dụng hiệu ứng bóng râm cho hình ảnh.

Thêm hiệu ứng bóng râm khác nhau cho hình ảnh:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

Thêm hiệu ứng bóng râm khác nhau cho hình ảnh (sử dụng giá trị âm cho bóng râm ngang và dọc):

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

drop-shadow(h-shadow v-shadow blur spread color)

Giá trị	Mô tả
h-shadow	Bắt buộc. Chỉ định giá trị pixel cho bóng râm ngang. Giá trị âm sẽ đặt bóng râm ở bên trái của hình ảnh.
v-shadow	Bắt buộc. Chỉ định giá trị pixel cho bóng râm thẳng đứng. Giá trị âm sẽ đặt bóng râm ở trên cùng của hình ảnh.
blur	Tùy chọn. Thêm hiệu ứng mờ cho bóng râm, đơn vị là pixel. Giá trị lớn hơn sẽ làm hiệu ứng mờ mạnh hơn (bóng râm sẽ lớn hơn và mờ hơn). Không được phép sử dụng giá trị âm. Nếu không chỉ định giá trị, mặc định là 0 (biên bóng râm rõ ràng).
spread	Tùy chọn. Phải là giá trị pixel. Giá trị dương sẽ làm bóng râm mở rộng và lớn hơn, giá trị âm sẽ làm bóng râm nhỏ hơn. Nếu không chỉ định, mặc định là 0 (bóng râm cùng kích thước với phần tử).
color	Tùy chọn. Thêm màu sắc cho bóng râm. Nếu không chỉ định, màu sắc phụ thuộc vào trình duyệt (thường là đen).