Réflexion d’image CSS
Dans ce chapitre, vous apprendrez à refléter une image.
Réflexions d’images CSS
Le box-reflect La propriété est utilisée pour créer une réflexion d’image.
La valeur de la box-reflect la propriété peut être : below, above,
left ou right.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit- spécifient la première version qui a fonctionné avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| boîte-réfléchir | 4.0 -webkit- | 79.0 -webkit- | Non supporté | 4.0 -webkit- | 15.0 -kit web- |
Exemples
Exemple
Ici on veut le reflet sous l’image :
image {
-webkit-box-reflect : ci-dessous ;
}
Essayez-le vous-même »
Exemple
Ici on veut le reflet à droite de l’image :
image {
-webkit-box-reflect : droite ;
}
Essayez-le vous-même »
Décalage de réflexion CSS
Pour spécifier l’écart entre l’image et la réflexion, ajoutez la taille de l’écart au box-reflect propriété.
Exemple
Ici, nous voulons la réflexion sous l’image, avec un décalage de 20px :
image {
-webkit-box-reflect : inférieur à 20px ;
}
Essayez-le vous-même »
Réflexion CSS avec dégradé
Nous pouvons également créer un effet de fondu sur la réflexion.
Exemple
Créez un effet de fondu sur le reflet :
image {
-webkit-box-reflect : en dessous de 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
Essayez-le vous-même »
#Réflexion #dimage #CSS