Étapes pour mettre en œuvre la réflexion à l'aide de CSS3

Nous utiliserons l'élément de réflexion pour obtenir certains effets. Cet article vous présentera les étapes de mise en œuvre les plus complètes de l'utilisation de CSS3 pour créer des réflexions.

box-reflect: none | <direction> Valeur par défaut, indiquant aucun effet de réflexion ;

direction : Cette valeur indique la direction dans laquelle box-reflect génère la réflexion, comprenant principalement les valeurs suivantes :

ci-dessus : indique que la réflexion générée est dans

Au dessus de l'objet

(image originale) ; en bas : indique que le reflet généré est en dessous de l'objet (image originale) ;

gauche

: indique le reflet généré Sur le côté gauche de l'objet (image originale

droite

: indique que le reflet généré est sur le côté droit de l'objet (image originale) ; décalage : utilisé pour définir le reflet généré. La distance entre le reflet et l'objet (image originale). La valeur peut être une valeur de pixel fixe ou une valeur en pourcentage, telle que :

Utiliser la valeur de longueur. pour définir la distance entre le reflet généré et l'image d'origine, tant qu'il s'agit de l'unité de longueur en CSS, cette valeur peut utiliser des valeurs négatives

Utilisez le pourcentage pour définir l'espacement entre le reflet généré et ; l'image originale, cette valeur peut également utiliser des valeurs négatives

mask-box-image : utilisé pour définir l'effet de masque de réflexion, qui peut être un fond

image

ou un dégradé-

image d'arrière-plan générée. Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser l'attribut de dégradé de transformation en CSS3

Étapes pour implémenter l'effet de création de commutateurs dynamiques avec Css3

Comment utiliser les sélecteurs d'attributs CSS3 pour remplacer le rôle de JS

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!