Trois petits effets spéciaux faciles à maîtriser : effets de creux de texte, de transparence et d'ombre

Cet article présente principalement un résumé d'exemples de paramètres de creux de texte, de valeur de transparence et d'effet d'ombre en CSS. La définition de la valeur de transparence de la couleur du trait du texte peut rendre le texte plus doux dans une certaine mesure. Les amis dans le besoin peuvent s'y référer. . Créez du texte creux sous

text-fill-color :
Code

Code CSSCopier le contenu dans le presse-papiers

1. -webkit-text-fill-couleur:transparent

2. -webkit; -text-stroke:1px #000; -la valeur de transparence de la couleur du trait rend le texte plus doux :

Code

Code CSS

Copier le contenu dans le presse-papiers

image d'arrière-plan:-webkit-linear-gradient(#eee, #000

);

1. -webkit-fond-clip:texte

2. -webkit-text-fill-

   color :transparent Copier le contenu dans le presse-papier

3. image d'arrière-plan:-webkit-linear-gradient(#eee

   ,
#000

>

-webkit-text-fill-
); couleur:

transparent

;

-webkit-text-stroke:1px

transparent

;

1. Effet 2Par comparaison, vous constaterez que le texte en effet 2 est plus clair que celui en effet 1 Plus doux

text-shadow

2. Syntaxe :Code CSS

   Copier le contenu dans le presse-papier

3. boîte -reflect : aucun | [ {2,3} && <

   couleur
> ][ , {2,3} && <
4. color

   >? ]* Implémentons un exemple de texte ombré :

   Code

Code CSS
Copier le contenu dans le presse-papiers

text-shadow:

2px

2px 0 #000 ;

1. Effet text-shadow a 3 paramètres de longueur, le premier représente le décalage horizontal, le second représente le décalage vertical , et le troisième représente le flou (facultatif) Ombre de texte plus douce : Code

Code CSS

Copier le contenu dans le presse-papiers

text-shadow

:

1px

1. 1px 5px #000; >Code CSS

   Copier le contenu dans le presse-papiers

text-shadow

:
1px

1px

5px #000

;

Effet

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!