Quelle est la propriété text-shadow ? Explication détaillée de la propriété text-shadow-tutoriel CSS-php.cn

Quelle est la propriété text-shadow ? Explication détaillée de la propriété text-shadow

云罗郡主

Libérer： 2018-10-23 13:48:26

original

8131 Les gens l'ont consulté

Après avoir appris le CSS, de nombreux étudiants souhaitent obtenir l'effet d'ombre d'une certaine ligne de texte. Pour les artistes, PS sera utilisé dans le style CSS, une balise text-shadow en CSS peut être utilisée pour obtenir l'effet d'ombre. .Et puis l'ombre du texte Quelle est la propriété text-shadow ? Résumons la propriété text-shadow ci-dessous.

Syntaxe de l'attribut text-shadow

text-shadow:x-offset  y-offset  blur  color;

Copier après la connexion

Explication détaillée de la chaîne de codes ci-dessus :

x-offset représente l'ombre horizontale et représente la position de décalage horizontal, x -offset L'unité est px, qui peut également être exprimée en pourcentage. Lorsque la valeur de x-offset est positive, cela signifie que l'ombre qui apparaît se déplace vers la droite. Si la valeur de x-offset apparaît négative, cela signifie. que l'ombre se déplace vers la gauche.

le décalage y représente l'ombre verticale. L'unité du décalage y est également la même que celle du décalage x. Si le décalage y a une valeur négative, cela signifie un déplacement vers le haut. signifie un déplacement vers le haut.

Le flou représente le degré de flou de l'ombre, mais le point le plus important est qu'il ne peut pas y avoir de valeurs négatives, seulement des valeurs positives. Plus la valeur de flou est grande, plus il est flou et plus il est petit. plus c'est clair. Si nous ne voulons pas définir de flou, nous définissons le flou sur 0, et

color représente la couleur de l'ombre.

Exemple spécifique :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-shadow属性</title>
    <style type="text/css">
        #lvye
        {
            font-size:40px;
            text-shadow:4px 4px 2px gray;
            -webkit-text-shadow: 4px 4px 2px gray;
            -moz-text-shadow: 4px 4px 2px gray;
        }
    </style>
</head>
<body>
    <div id="lvye">php中文网</div>
</body>
</html>

Copier après la connexion

L'effet du code ci-dessus affiché dans le navigateur est le suivant :

Quelle est la propriété text-shadow ? Explication détaillée de la propriété text-shadow

Ce qui précède est le texte fantôme du texte Qu'est-ce que l'attribut -shadow ? Une introduction complète à l'explication détaillée de l'attribut text-shadow. Si vous souhaitez en savoir plus sur le Tutoriel vidéo CSS, veuillez faire attention au site Web php chinois.

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!