Maison > interface Web > tutoriel CSS > le corps du texte

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

零下一度
Libérer: 2017-04-28 10:48:29
original
3274 Les gens l'ont consulté

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 :

  3. Code


Code CSS201637105111410.png (752×75)

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

    ,
  4. #000
>

-webkit-text-fill-
); couleur201637105151945.png (609×90):

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

  2. text-shadow
  3. Syntaxe :Code CSS

    Copier le contenu dans le presse-papier
  4. boîte -reflect : aucun | [ {2,3} && <

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

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

    Code

Code CSS
201637105229256.png (620×72)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


201637105301417.png (622×53)

text-shadow

:
1px

1px

5px #000

;

Effet
201637105420741.png (578×52)

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