Paramètres pour le creux du texte, la transparence et les effets d'ombre en CSS3

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

-webkit-text-fill-color:transparent;   
-webkit-text-stroke:1px #000;

Effet

La valeur de transparence texte-trait-couleur rend le texte plus doux :
Code

background-image:-webkit-linear-gradient(#eee,#000);   
-webkit-background-clip:text;   
-webkit-text-fill-color:transparent;

Effet 1

Code

background-image:-webkit-linear-gradient(#eee,#000);   
-webkit-background-clip:text;   
-webkit-text-fill-color:transparent;   
-webkit-text-stroke:1px transparent;

Effet 2

Par comparaison, vous constaterez que le texte de l'effet 2 est plus doux que celui de l'effet 1

text-shadow text shadow
Syntaxe :

box-reflect：none | [ <length>{2,3} && <color>? ][ , <length>{2,3} && <color>? ]*

Implémentons un exemple d'ombre de texte :
Code

text-shadow:2px 2px 0 #000;

Effet

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

text-shadow:1px 1px 5px #000;

Effet

Ombres multiples :
Code

text-shadow:1px 1px 5px #000;

Effet

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisation de CSS3 pour dessiner des graphiques de base

Utilisation des ombres de calque CSS3 et des ombres de texte

Comment utiliser CSS pour étirer et remplir l'image d'arrière-plan afin d'éviter un affichage répété

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!