Để thêm bóng đổ vào hình ảnh trong CSS3, hãy sử dụng giá trị bóng đổ cho thuộc tính bộ lọc. Nó có các giá trị sau -
h-shadow - Để chỉ định giá trị pixel cho bóng ngang.
v-shadow - Để chỉ định giá trị pixel cho bóng dọc. Giá trị âm đặt bóng bên trên hình ảnh.
mờ - Để thêm hiệu ứng mờ cho bóng đổ.
lây lan - Các giá trị dương làm bóng mở rộng và giá trị âm thu hẹp lại.
màu sắc - Để thêm màu vào bóng
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>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html> Đầu ra
