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

Ajouter une ombre à l'image en utilisant CSS3

WBOYavant: 2023-09-03 18:17:051189parcourir

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!

css3

Déclaration：

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

Article précédent：Comment créer un graphique en aires en utilisant CSSArticle suivant：Comment créer un graphique en aires en utilisant CSS

Articles Liés

Voir plus