Comment implémenter la réflexion des polices en CSS3-tutoriel CSS-php.cn

Comment implémenter la réflexion des polices en CSS3

藏色散人

Libérer： 2020-12-17 16:35:15

original

4049 Les gens l'ont consulté

Comment implémenter la réflexion de police dans CSS3 : créez d'abord un exemple de fichier HTML ; puis définissez un morceau de texte ; puis ajoutez l'attribut "box-reflect" au texte spécifié pour obtenir la réflexion de police.

Comment implémenter la réflexion des polices en CSS3

L'environnement d'exploitation de ce tutoriel : Système Windows 7, version CSS3, cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel vidéo CSS"

css3 pour implémenter la réflexion des polices

En CSS, box-reflect est principalement Propriétés utilisées pour obtenir un effet de réflexion de police.

La propriété box-reflect est principalement utilisée pour définir ou récupérer la réflexion d'un objet.

syntaxe box-reflect

box-reflect：none | <direction> <offset>? <mask-box-image>?

Copier après la connexion

Comme cet attribut n'est pas un attribut standard du W3C, vous devez quand même ajouter l'attribut privé du navigateur lors de son utilisation. Selon la compatibilité du navigateur, utilisez box. Lorsque -reflect, vous devez ajouter le préfixe -webkit :

-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>?
 box-reflect：none | <direction> <offset>? <mask-box-image>?

Copier après la connexion

Cet attribut n'est pas pris en charge sous Firefox. Sous Firefox, vous pouvez utiliser -moz-element() pour simuler

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> html,body{ margin:50px 0; } .reflect{ width:950px; margin:0 auto; -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3)); font:bold 100px/1.231 georgia,sans-serif; text-transform:uppercase; } </style> </head> <body> <div>你看到倒影了么？</div> </body> </html>

Copier après la connexion

1. . Direction définit la direction. Les valeurs incluent ci-dessus, ci-dessous, gauche et droite.

ci-dessus : Spécifiez que le reflet doit être au-dessus de l'objet

ci-dessous : Spécifiez le reflet qui doit être en dessous de l'objet

gauche : Spécifiez que le reflet doit être sur le côté gauche de l'objet

droite : Spécifiez que le reflet est sur le côté droit de l'objet

2. offset définit la distance du décalage du reflet La valeur comprend une valeur numérique ou un pourcentage, où. le pourcentage est déterminé en fonction de la taille de l'objet. La valeur par défaut est 0.

Utilisez la valeur de longueur pour définir la distance entre le reflet et l'objet. Peut être négatif. Utilisez un pourcentage pour définir la distance entre le reflet et l'objet. Peut être négatif.

3. mask-box-image définit l'image du masque, qui couvrira la zone de projection. Si la valeur de ce paramètre est omise, la valeur par défaut est une image non masquée.

Valeurs :

aucun : Aucune image de masque :

Spécifiez l'image du masque à l'aide d'adresses absolues ou relatives.

Créez une image de masque en utilisant un dégradé linéaire.

Créez une image de masque en utilisant un dégradé radial (radial).

Créez une image de masque arrière en utilisant un dégradé linéaire répétitif.

Créez une image de masque en utilisant un dégradé radial (radial) répétitif.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html,body{
  margin:50px 0;
}
.reflect{
  width:950px;
  margin:0 auto;
  -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
  font:bold 100px/1.231 georgia,sans-serif;
  text-transform:uppercase;
}
</style>
</head>
<body>
<div>你看到倒影了么？</div>
</body>
</html>

Copier après la connexion

Rendu :

Comment implémenter la réflexion des polices en CSS3