Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
img {
width: 200px;
}
.box-shadow {
float: left;
box-shadow: 7px 7px 7px #666666;
}
.drop-shadow {
float: right;
}
.drop-shadow img {
filter: drop-shadow(7px 7px 7px #666666);
-webkit-filter: drop-shadow(7px 7px 7px #666666);
}
</style>
</head>
<body>
<h2>Différence entre box-shadow et drop-shadow</h2>
<div class="images">
<div class="box-shadow">
<p>
Box-shadow
<img src="https://images.vexels.com/media/users/3/157932/isolated/preview/951a617272553f49e75548e212ed947f-curved-check-mark-icon-by-vexels.png" />
</p>
</div>
<div class="drop-shadow">
<p>
Drop-shadow
<img src="https://images.vexels.com/media/users/3/157932/isolated/preview/951a617272553f49e75548e212ed947f-curved-check-mark-icon-by-vexels.png" />
</p>
</div>