Hàm drop-shadow

Hàm drop-shadow cho phép thêm bóng đổ vào hình nền.

Cú pháp

bộ chọn {
	filter: drop-shadow(dịch chuyển theo x, dịch chuyển theo y, bán kính làm mờ, màu);
}

Các giá trị

Giá trị	Mô tả
dịch chuyển theo x	Dịch chuyển bóng đổ theo chiều ngang so với hình nền. Số dương biểu thị dịch chuyển bóng sang phải, số âm - sang trái. Tham số bắt buộc.
dịch chuyển theo y	Dịch chuyển bóng đổ theo chiều dọc so với hình nền. Số dương biểu thị dịch chuyển bóng xuống dưới, số âm - lên trên. Tham số bắt buộc.
làm mờ	Thiết lập bán kính làm mờ của bóng đổ. Giá trị càng lớn, bóng đổ càng bị làm mờ. Tham số tùy chọn. Theo mặc định bằng `0`.
màu	Màu của bóng đổ. Tham số tùy chọn. Theo mặc định được thiết lập là màu đen.

Ví dụ

Hãy thiết lập cho hình ảnh của chúng ta một bóng đổ màu xanh nước biển không có dịch chuyển theo các trục, với độ làm mờ 5px:

<div id="elem"></div>

#elem {
	filter: drop-shadow(0 0 5px #035470);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Xem thêm

hàm blur,
làm mờ hình nền
hàm brightness,
thiết lập độ sáng cho hình nền
hàm contrast,
thiết lập độ tương phản cho hình nền
hàm hue-rotate,
thiết lập sắc màu cho hình nền
hàm invert,
đảo ngược màu sắc của hình nền
hàm opacity,
thiết lập độ trong suốt cho hình nền
hàm sepia,
chuyển đổi hình nền thành màu sepia
thuộc tính background,
là thuộc tính viết tắt cho hình nền
thuộc tính background-image,
dùng để thiết lập hình ảnh nền cho khối