Maison > interface Web > tutoriel CSS > Comment ajouter un effet d'ombre de texte en CSS3 ? text-shadow définit l'effet d'ombre du texte

Comment ajouter un effet d'ombre de texte en CSS3 ? text-shadow définit l'effet d'ombre du texte

青灯夜游
Libérer: 2018-09-26 10:54:41
original
13694 Les gens l'ont consulté

L'effet d'ombre est un effet courant et très pratique. Je pense que certains amis se posent parfois des questions lors de l'utilisation des effets d'ombre pour embellir les pages Web, telles que : comment définir l'ombre des polices et du texte, etc. Ce chapitre vous expliquera donc comment définir l’ombre du texte de la police en CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

En fait, il existe un attribut très pratique en CSS3 qui peut ajouter un effet d'ombre au texte de la police, c'est l'attribut css3 text-shadow.

Alors, examinons d'abord en détail l'attribut text-shadow :

text-shadow est un mot d'attribut de style CSS, qui est utilisé pour définir si la police de texte de l'objet a un effet d'ombre et de flou.

attribut text-shadow : en CSS3, vous pouvez utiliser l'attribut text-shadow pour ajouter un effet d'ombre au texte de la page. Vous pouvez obtenir certains effets d'ombre de police requis en définissant des valeurs d'attribut pertinentes. ​à l'attribut text-shadow., Réduisez l'utilisation d'images.

La syntaxe de l'attribut text-shadow :

text-shadow: h-shadow v-shadow blur color;
Copier après la connexion

On peut voir que l'attribut text-shadow peut définir 4 paramètres, chaque paramètre est séparé par des espaces. . Paramètres :

h-shadow : Définissez la position de l'ombre horizontale (direction de l'axe x), un paramètre obligatoire est autorisé ;
v-shadow : définissez la position de l'ombre verticale (direction de l'axe y), les paramètres requis, les valeurs négatives autorisées.
flou : La distance (taille du rayon) du flou d'ombre, vous pouvez choisir de définir les paramètres.
color : La couleur de l'ombre, paramètres facultatifs à définir.

Remarque : L'attribut text-shadow peut ajouter une ou plusieurs ombres au texte. Cette propriété est une liste de nuances séparées par des virgules, chaque nuance étant spécifiée avec deux ou trois valeurs de longueur et une valeur de couleur facultative. La longueur omise est 0.

Regardons un petit exemple de définition de l'ombre du texte de la police en CSS3 pour avoir une compréhension concrète de l'utilisation de l'attribut text-shadow :

<h1>我是一段测试文字</h1>
Copier après la connexion
h1{
   color:powderblue; /*设置文字颜色*/
   text-shadow: 2px 3px 1px pink;/*添加字体文字的阴影*/
}
Copier après la connexion

Rendu :

Comment ajouter un effet dombre de texte en CSS3 ? text-shadow définit leffet dombre du texte

Regardons à quoi cela ressemblera si nous ne définissons pas l'effet d'ombre du texte CSS3 :

Comment ajouter un effet dombre de texte en CSS3 ? text-shadow définit leffet dombre du texte

Explication :

1. Le décalage horizontal de l'ombre (h-shadow) : il peut prendre une valeur positive ou une valeur négative si la. La valeur est positive, l'ombre est sur le côté droit de l'objet, sinon lorsque sa valeur est négative, l'ombre est sur le côté gauche de l'objet.

2. Le décalage vertical de l'ombre (v-shadow) : Il peut prendre une valeur positive ou une valeur négative, si c'est une valeur positive, l'ombre est en bas de l'objet. lorsque la valeur est une valeur négative, l'ombre au-dessus de l'objet.

3. Rayon de flou de l'ombre : ne peut être défini que sur des valeurs positives. Si la valeur est plus grande, l’ombre sera floue, sinon l’ombre sera plus claire. Si sa valeur est 0, cela signifie que l'ombre n'a aucun effet de flou.

4. Couleur de l'ombre : lorsqu'aucune valeur de couleur n'est spécifiée, le navigateur utilisera la couleur par défaut, mais la couleur par défaut de chaque navigateur est différente, en particulier les navigateurs Safari et Chrome sous le noyau webkit ne coloreront pas, cela c'est-à-dire la transparence, il est recommandé de ne pas omettre ce paramètre.

En parlant des différentes couleurs par défaut des navigateurs, voyons si l'attribut text-shadow est pris en charge dans chaque navigateur :

Prise en charge des navigateurs :

Comment ajouter un effet dombre de texte en CSS3 ? text-shadow définit leffet dombre du texte

Tous les principaux navigateurs prennent en charge l'attribut text-shadow.

Remarque : Internet Explorer 9 et les navigateurs antérieurs ne prennent pas en charge l'attribut text-shadow.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal