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

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;

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 id="我是一段测试文字">我是一段测试文字</h1>

h1{
   color:powderblue; /*设置文字颜色*/
   text-shadow: 2px 3px 1px pink;/*添加字体文字的阴影*/
}

Rendu :

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

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 :

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!