Explication détaillée de l'utilisation de l'attribut CSS3 text-shadow :
Avant cela, si vous définissez l'effet d'ombre du texte, vous avez généralement besoin d'autres outils, tels que utiliser Photoshop pour créer des images réactives. C'est difficile à réaliser simplement en utilisant CSS3. Désormais, CSS3 fournit l'attribut text-shadow qui nous permet d'obtenir des effets qui n'étaient pas possibles auparavant.
Structure grammaticale :
Dans différents tutoriels, la structure grammaticale est écrite sous différentes formes. Bref, elles expriment toutes le même sens, nous choisissons donc celle qui est la plus facile à comprendre :
text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]...
.
Notes de syntaxe :
1. Couleur : représente la valeur de couleur de l'ombre.
Axe 2.x : décalage horizontal, l'unité est le pixel.
Axe 3.y : décalage dans le sens vertical, l'unité est le pixel.
4. Rayon de flou : La plage d'influence de l'ombre ne peut pas être une valeur négative. Plus la valeur est grande, plus elle est floue.
L'ordre des mots-clés de la structure grammaticale ci-dessus peut également avoir une deuxième forme :
text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...
La couleur de l'ombre peut être au début ou à la fin.
Exemple de code :
Démonstration de décalage sur l'axe x :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 300px 0px 0px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>Le code ci-dessus peut définir le décalage horizontal du texte à 300 px et l'ombre la couleur est verte.
Démonstration du décalage de l'axe Y :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 0px 60px 1px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>Le code ci-dessus peut définir le décalage vertical du texte sur 60 px et la couleur de l'ombre sur vert.
Démonstration complète du code :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 10px 20px 5px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>Ombre multicouche :
La référence dite multicouche consiste à appliquer un style d'ombre au texte, puis Séparez par des virgules.
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 5px 10px 5px,blue 8px 10px 6px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>
section suivante