Maison >interface Web >tutoriel CSS >Comment implémenter la réflexion des polices en CSS3
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.
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>?
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>?
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>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>Rendu :
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!