Maison  >  Article  >  interface Web  >  Ajouter une ombre à l'image en utilisant CSS3

Ajouter une ombre à l'image en utilisant CSS3

WBOY
WBOYavant
2023-09-03 18:17:051203parcourir

Pour ajouter une ombre portée à une image en CSS3, utilisez la valeur d'ombre portée de la propriété filter. Il a les valeurs suivantes -

h-shadow – Spécifie la valeur en pixels de l'ombre horizontale.

v-shadow > – Spécifie la valeur en pixels de l'ombre verticale. Les valeurs négatives placent l'ombre au-dessus de l'image.

Flou – Ajoutez un effet de flou aux ombres.

Diffusion - Les valeurs positives font agrandir l'ombre, les valeurs négatives font rétrécir l'ombre.

Color – Ajoutez de la couleur aux ombres

Exemple

Démo en direct

<!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>

Sortie

使用 CSS3 添加阴影到图像

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer